<template>
  <!-- <div class="home"> -->
  <!-- 告警红边 -->
  <div class="redload" v-if="gaojingIsshow"></div>
  <Header :parentmethod="toggle" />
  <!-- 模拟水位告警弹框 -->
  <div class="bgbg" v-if="gaojingIsshow2">
    <div class="gaojin">
      <div class="titlegaojing">模拟水位告警</div>
      <div class="gaojingclose" @click="closegaojin"></div>
      <div class="gaojingxq">
        <span>告警详情：</span>
        <span>水位达到{{ waterheight }}M</span>
      </div>
      <div class="gaojingtime">
        <span>告警时间：</span>
        <span>{{ watertime }}</span>
      </div>
      <div class="gaojingroupimg">
        <img src="@/assets/image/gaojintop.png" alt="" class="gaojintop" />
        <img
          src="@/assets/image/gaojinbottom.png"
          alt=""
          class="gaojinbottom"
        />
        <img src="@/assets/image/bigcircle.png" alt="" class="bigcircle" />
        <img
          src="@/assets/image/middlecircle.png"
          alt=""
          class="middlecircle"
        />
        <img src="@/assets/image/smallcircle.png" alt="" class="smallcircle" />
      </div>
    </div>
  </div>
  <!-- 告警弹框 -->
  <div class="bgbg" v-if="gaojinclick">
    <div class="gaojin">
      <div class="titlegaojing">告警信息</div>
      <div class="gaojingclose" @click="closegaojin2"></div>
      <div
        v-if="data.itemdata.content.warnContent || data.itemdata.title"
        class="gaojingxq"
      >
        <span>告警详情：</span>
        <span>{{
          data.itemdata.content.warnContent || data.itemdata.title
        }}</span>
      </div>
      <div v-if="data.itemdata.content.warnLevel" class="gaojingtime">
        <span>告警等级：</span>
        <span>{{
          data.itemdata.content.warnLevel == 1 ? "一般告警" : "重大告警"
        }}</span>
      </div>
      <div v-if="data.itemdata.content.warnPointName" class="gaojingtime">
        <span>告警设备：</span>
        <span>{{ data.itemdata.content.warnPointName }}</span>
      </div>
      <div
        v-if="data.itemdata.warnTime || data.itemdata.content.tm"
        class="gaojingtime"
      >
        <span>告警时间：</span>
        <span>{{ data.itemdata.warnTime || data.itemdata.content.tm }}</span>
      </div>
      <div
        v-if="data.itemdata.type <= 3"
        class="gaojingdingwei"
        @click="dingweidanger(data.itemdata.content)"
      >
        定位
      </div>
      <div class="gaojingroupimg">
        <img src="@/assets/image/gaojintop.png" alt="" class="gaojintop" />
        <img
          src="@/assets/image/gaojinbottom.png"
          alt=""
          class="gaojinbottom"
        />
        <img src="@/assets/image/bigcircle.png" alt="" class="bigcircle" />
        <img
          src="@/assets/image/middlecircle.png"
          alt=""
          class="middlecircle"
        />
        <img src="@/assets/image/smallcircle.png" alt="" class="smallcircle" />
      </div>
    </div>
  </div>
  <!-- 洪水预告告警弹框 -->
  <div class="bgbg" v-if="gaojinclick3">
    <div class="gaojin">
      <div class="titlegaojing">洪水预告</div>
      <div class="gaojingclose" @click="closegaojin3"></div>
      <div class="gaojingxq">
        <span>洪水预告：</span>
        <span>{{ hongshuiyugaotext }}</span>
      </div>
      <div class="gaojingtime">
        <span>是否需要进行洪水数据模拟。</span>
      </div>
      <div class="gaojingtime">
        <span class="closeshuju" @click="closegaojin3">关闭</span>
        <span class="shujumoni" @click="shujumoni">数据模拟</span>
      </div>
      <div class="gaojingroupimg">
        <img src="@/assets/image/gaojintop.png" alt="" class="gaojintop" />
        <img
          src="@/assets/image/gaojinbottom.png"
          alt=""
          class="gaojinbottom"
        />
        <img src="@/assets/image/bigcircle.png" alt="" class="bigcircle" />
        <img
          src="@/assets/image/middlecircle.png"
          alt=""
          class="middlecircle"
        />
        <img src="@/assets/image/smallcircle.png" alt="" class="smallcircle" />
      </div>
    </div>
  </div>
  <!-- 水质和气象告警弹框 -->
  <div class="bgbg" v-if="gaojinclick4">
    <div class="gaojin">
      <div class="titlegaojing">告警信息</div>
      <div class="gaojingclose" @click="closegaojin4"></div>
      <div class="gaojingxq">
        <span
          >{{
            data.gaojingdata.type && data.gaojingdata.type == 5
              ? "水质告警"
              : "气象告警"
          }}：</span
        >
        <span>{{ shuizhigaojingtext }}</span>
      </div>

      <div v-if="shuizhigaojingtime" class="gaojingtime">
        <span>告警时间：</span>
        <span>{{ shuizhigaojingtime }}</span>
      </div>
      <!-- <div class="gaojingtime">
        <span>是否需要进行洪水数据模拟。</span>
      </div> -->
      <div class="gaojingtime">
        <span class="closeshuju" @click="closegaojin4">关闭</span>
        <!-- <span class="shujumoni" @click="shujumoni">数据模拟</span> -->
      </div>
      <div class="gaojingroupimg">
        <img src="@/assets/image/gaojintop.png" alt="" class="gaojintop" />
        <img
          src="@/assets/image/gaojinbottom.png"
          alt=""
          class="gaojinbottom"
        />
        <img src="@/assets/image/bigcircle.png" alt="" class="bigcircle" />
        <img
          src="@/assets/image/middlecircle.png"
          alt=""
          class="middlecircle"
        />
        <img src="@/assets/image/smallcircle.png" alt="" class="smallcircle" />
      </div>
    </div>
  </div>
  <div class="shuiweichanges" v-if="false">
    <div class="shuiweichangetitle">洪水预告水位变化：</div>
    <div class="waterlevel">170.122米</div>
  </div>
  <div class="rightbutton" v-if="shuizhabutton">
    <div v-for="(item, index) in data.zmlist" :key="index" class="rightitem">
      <img
        @click="changezm(item, index)"
        v-if="item.show == false"
        :src="item.icon"
        alt=""
        class="imgtt"
      />
      <img
        @click="changezm(item, index)"
        v-else
        :src="item.activeicon"
        alt=""
        class="imgtt"
      />
      <div style="color: #ffffff">{{ item.text }}</div>
      <el-slider
        :disabled="item.disableshow"
        v-if="item.show && item.text != '总开关'"
        v-model="item.value"
        vertical
        class="elslider"
        :format-tooltip="handlDelta"
        @change="changeSliderue2(item, index, item.value)"
      />
    </div>
  </div>
  <img src="@/assets/image/zdsz.png" alt="" class="zdsz" @click="toggle" />
  <div class="left" :style="{ transform: `translateX(${-moveX}%)` }">
    <div class="leftbox">
      <div class="lefttop">
        <div class="titlediv">
          <div class="titletext">水库情况</div>
        </div>
        <div class="flex">
          <div
            v-for="(item, index) in data.waterimgList"
            :key="index"
            class="flexitem"
            @mouseenter="listItemClicked(index)"
            @mouseleave="mouseleavell(index)"
          >
            <img :src="item.img" alt="" class="fleximg" />
            <div class="flextext">{{ item.text }}</div>
            <div class="flexval">{{ item.val }}</div>
          </div>
        </div>
        <div class="flex2">
          <div class="flexel-progress">
            <el-progress
              class="custom-progress"
              type="circle"
              :percentage="percentage"
              :stroke-width="18"
              color="#00B5FF"
            />
            <div class="bottomtext">目前容积占比</div>
          </div>
          <div class="flexel-progress" @click="xiehongzha">
            <img
              v-if="status == '开'"
              src="@/assets/image/kz.png"
              alt=""
              class="fleximgsz"
            />
            <img
              v-else-if="status == '关'"
              src="@/assets/image/gz.png"
              alt=""
              class="fleximgsz"
            />
            <img v-else src="@/assets/image/lixian.png" class="fleximgsz2" />
            <div class="bottomtext bottomtext2">水闸状态-{{ status }}</div>
          </div>
        </div>
      </div>
      <Shuiweiechart
        v-if="levelwatershow"
        :levelwater="parseFloat(data.shuikudata.data[0].rz)"
      />
      <div class="leftcenter">
        <div class="titlediv">
          <div class="titletext">水质检测</div>
        </div>
        <div class="centerflex">
          <div
            v-for="(item, index) in data.waterquiltyList"
            :key="index"
            :class="['centerflexitemn', item.class]"
          >
            <div class="centerflextext">{{ item.text }}</div>
            <div
              :class="[
                'centerflexval',
                {
                  redclass:
                    (item.text == '温度℃' && item.val > 50) ||
                    (item.text == 'PH值' && item.val > 9) ||
                    (item.text == '浊度NTU' && item.val > 1000) ||
                    (item.text == '温度℃' && item.val < -20) ||
                    (item.text == 'PH值' && item.val < 6) ||
                    (item.text == '电导率us/cm' && item.val > 2) ||
                    (item.text == '溶解氧mg/L' && item.val < 6),
                },
              ]"
            >
              {{ item.val }}
              <img
                v-if="
                  (item.text == '温度℃' && item.val > 50) ||
                  (item.text == 'PH值' && item.val > 9) ||
                  (item.text == '浊度NTU' && item.val > 1000) ||
                  (item.text == '电导率us/cm' && item.val > 2)
                "
                src="@/assets/image/uk2.png"
                alt=""
                class="redimg"
              />
              <img
                v-if="
                  (item.text == '温度℃' && item.val < -20) ||
                  (item.text == 'PH值' && item.val < 6) ||
                  (item.text == '溶解氧mg/L' && item.val < 6)
                "
                src="@/assets/image/down2.png"
                alt=""
                class="redimg"
              />
              <img
                v-if="item.text == '电导率us/cm' && item.val < 2"
                src="@/assets/image/gdown2.png"
                alt=""
                class="redimg"
              />
              <img
                v-if="item.text == '溶解氧mg/L' && item.val > 6"
                src="@/assets/image/gup2.png"
                alt=""
                class="redimg"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="leftbottom">
        <div class="titlediv">
          <div class="titletext">告警信息</div>
        </div>
        <div v-if="yibanbaojing" class="yibanbaojing"></div>
        <!-- <img
          src="@/assets/image/load.png"
          alt=""
          class="loadimg"
          @click="exportToExcel"
        /> -->
        <div class="table">
          <el-table
            ref="elTableyy"
            :data="data.tableData"
            style="width: 100%; background: transparent"
            @row-click="handleRowClick"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="warnLevel"
              label="告警等级"
              align="center"
              min-width="30%"
            >
              <template #default="scope">
                {{
                  scope.row.type <= 3
                    ? scope.row.content.warnLevel == 1
                      ? "一般告警"
                      : "重大告警"
                    : scope.row.type == 4
                    ? "洪水预警"
                    : scope.row.type == 5
                    ? "水质告警"
                    : scope.row.type == 6
                    ? "气象告警"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="原因"
              align="center"
              min-width="30%"
              show-overflow-tooltip
            />
            <el-table-column
              prop="warnTime"
              label="时间"
              align="center"
              min-width="40%"
            >
              <template #default="scope">
                {{
                  scope.row.type == 5
                    ? scope.row.content.tm
                    : scope.row.warnTime
                }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" align="center" min-width="10%">
              <template #default="scope">
                <el-button size="small" link style="color: #5adbe9"
                  >关闭</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination
            style="
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 15px;
            "
            :size="20"
            :disabled="false"
            :background="false"
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :current-page="page"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="right" :style="{ transform: `translateX(${moveX}%)` }">
    <div class="rightbox">
      <div class="righttop">
        <div class="titlediv">
          <div class="titletext">天气切换</div>
        </div>
        <div class="switch">
          <span class="switchtext">天气模拟</span>
          <el-switch @change="changetime" v-model="value1" class="mb-2" />
        </div>
        <div>
          <div class="timetrack">
            <Timeline
              :timelineData="data.timelineData"
              :activeYear="timeh"
              :isabled="isabled"
              @callBack="callBackFun"
            />
          </div>
          <div class="righttopflex" :style="data.events" v-if="value1">
            <div
              class="flexitemd"
              v-for="(item, index) in data.weatherdata"
              :key="index"
              @click="wetherchange(item, index)"
            >
              <img :src="item.topimg" alt="" class="topimg" />
              <img :src="item.bottomimg" alt="" class="img1" />
              <img
                :src="item.activebottomimg"
                alt=""
                class="img1"
                v-if="item.show == true"
              />
              <!-- <img :src="item.img2" alt="" class="img2" />
                <img :src="item.img3" alt="" class="img3" />
                <img :src="item.img4" alt="" class="img4" />
                <img :src="item.img5" alt="" class="img5" /> -->
              <div class="wethertext">{{ item.text }}</div>
            </div>
          </div>
          <div class="righttopflex2" v-else>
            <MyCharts :dataSource="data.dataSourceWeather"></MyCharts>
          </div>
        </div>
      </div>
      <div class="rightcenter">
        <div class="titlediv">
          <div class="titletext">暴雨预测</div>
        </div>
        <div class="switch">
          <span class="switchtext">暴雨模拟</span>
          <el-switch v-model="value2" class="mb-2" @change="changevents" />
        </div>
        <div class="blocktimer">
          <!-- <el-date-picker
            v-model="timer1"
            type="datetime"
            placeholder="选择初始日期"
            format="YYYY-MM-DD HH:mm"
            class="datepicker"
            popper-class="picker-popper"
          />
          <span>-</span>
          <el-date-picker
            class="datepicker"
            popper-class="picker-popper"
            v-model="timer2"
            type="datetime"
            placeholder="选择结束日期"
            format="YYYY-MM-DD HH:mm"
          /> -->
          <div
            :style="data.events2"
            :class="['timerthreeitem', { activetimeritem: item.show == true }]"
            v-for="(item, index) in data.threelist"
            @click="threeclick(item, index)"
          >
            {{ item.text }}
          </div>
        </div>
        <div class="jzwhf" :style="data.events2">
          <!-- <MyCharts :dataSource="data.dataSource"></MyCharts> -->
          <div id="echarts" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="rightbottom">
        <div class="titlediv">
          <div class="titletext">水库视频</div>
        </div>
        <div class="videoplay">
          <video-player
            style="width: 100%; height: 100%"
            :src="videoSrc"
            :options="data.playerOptions"
            :volume="0.6"
          />
          <img
            @click="openvideo"
            src="@/assets/image/fullscreen.png"
            alt=""
            class="fullscreen"
          />
        </div>
      </div>
    </div>
  </div>

  <!-- 水库视频列表 -->
  <Videolist ref="videoRef" />
  <!-- 巡检线路弹框 -->

  <div class="xunjianxianlu" v-if="xunjianshow">
    <div class="xunjianxianluclose" @click="closexunjian"></div>
    <div class="titlexunjian">巡检线路</div>
    <div class="flexxunjian2">
      <div class="flex1">巡检点位</div>
      <div class="flex2">漫游</div>
    </div>
    <div class="flexxunjian">
      <div class="flexleft">
        <div
          v-for="(item, index) in data.xunjianxianlu"
          :key="index"
          class="flex2"
        >
          <span
            @click="itemshow3(item, index)"
            :class="['flex1span', { flex1span2: item.show3 }]"
            >{{ item.text }}</span
          >
        </div>
        <!-- <div class="flex1span">泄洪闸巡检</div>
        <div class="flex1span">下游泄洪道巡检</div> -->
      </div>
      <div class="flexright">
        <div class="flexright2">
          <img
            v-if="itemIsshow"
            @click="itemshow('大坝巡检', 1)"
            src="@/assets/image/xunjianclose.png"
            alt=""
            class="xunjianclose"
          />
          <img
            v-else
            @click="itemshow('大坝巡检', 1)"
            src="@/assets/image/xunjianing.png"
            alt=""
            class="xunjianclose"
          />
          <img
            v-if="itemIsshow2 && !itemIsshow"
            @click="itemshow2"
            src="@/assets/image/zanting.png"
            alt=""
            class="xunjianclose"
          />
          <img
            v-if="!itemIsshow2 && !itemIsshow"
            @click="itemshow2"
            src="@/assets/image/continue.png"
            alt=""
            class="xunjianclose"
          />
        </div>
        <div class="flexright2">
          <img
            v-if="viewportshow"
            src="@/assets/image/zu339.png"
            alt=""
            class="viewimg"
            @click="viewport(true)"
          />
          <img
            v-else
            src="@/assets/image/zu339active.png"
            alt=""
            class="viewimg"
            @click="viewport(false)"
          />
        </div>
      </div>
    </div>
    <!-- <div
      v-for="(item, index) in data.xunjianxianlu"
      :key="index"
      class="flexxunjian"
    >
      <div class="flex1">
        <span
          @click="itemshow3(item, index)"
          :class="['flex1span', { flex1span2: item.show3 }]"
          >{{ item.text }}</span
        >
      </div>
    </div> -->
    <!-- <div class="flex2 flex3"> -->
    <!-- <img
        @click="itemshow(item, index)"
        v-if="!item.show"
        src="@/assets/image/xunjianclose.png"
        alt=""
        class="xunjianclose"
      />
      <img
        @click="itemshow(item, index)"
        v-else
        src="@/assets/image/xunjianing.png"
        alt=""
        class="xunjianclose"
      />
      <img
        @click="itemshow2(item, index)"
        v-if="!item.show2 && item.show"
        src="@/assets/image/zanting.png"
        alt=""
        class="xunjianclose"
      />
      <img
        @click="itemshow2(item, index)"
        v-if="item.show2 && item.show"
        src="@/assets/image/continue.png"
        alt=""
        class="xunjianclose"
      /> -->
    <!-- </div> -->
  </div>

  <div class="bottom">
    <div v-if="isshowbutton">
      <img
        v-if="!buttonl"
        src="@/assets/image/button1.png"
        alt=""
        class="buttonl"
        @click="buttonll(true)"
      />
      <img
        v-else
        src="@/assets/image/button2.png"
        alt=""
        class="buttonl"
        @click="buttonll(false)"
      />
    </div>
    <div class="bottomback">
      <div
        v-for="(item, index) in data.bottomdata"
        :key="index"
        :class="['buttoncss', { activebutton: item.show == true }]"
        @click="clickbutton(item, index)"
        @mouseenter="clickbuttonenter(item, index)"
        @mouseleave="clickbuttonleave(item, index)"
      >
        <div>{{ item.text }}</div>
        <div
          class="buttonbuttonlist"
          @mouseleave="mouseleaveevent(item)"
          v-show="item.showlabel == true"
        >
          <div
            v-for="(el, num) in item.selectlist"
            :key="num"
            :class="['elitem', { activeelitem: el.show == true }]"
            @click.stop="elclick(el, index, item)"
          >
            {{ el.text }}
          </div>
        </div>
      </div>
      <img src="@/assets/image/houtai.png" alt="" class="houtaixzbutton" />
      <!-- <img
          src="@/assets/image/houtaixz.png"
          alt=""
          class="houtaixzbutton"
        /> -->
      <div class="bottomecharts" v-show="data.bottomdata[3].show">
        <el-slider
          class="self_slider"
          :disabled="isabled2"
          v-model="shuiwei"
          :min="0"
          :max="100"
          :marks="guideMarks"
          :show-tooltip="true"
          @change="changeSliderue"
        />
        <div class="shuiweitext">
          <div>水位</div>
          <div>(m)</div>
        </div>
        <!-- <MyCharts
            :dataSource="data.dataSource2"
            canvasWidth="4.79167vw"
            canvasHeight="8.90625vw"
          ></MyCharts> -->
      </div>
    </div>
  </div>
  <ShenLiuJi />
  <ShenYaJi />
  <YuShuiQing />
  <VideoVue :bottomdata="data.bottomdata" />
  <Bxjc />
  <Bxjcy />
  <Shuiweiji />
</template>

<script setup>
import Videolist from "./videolist.vue";
import Shuiweiechart from "./shuiweiecharts.vue";
import * as echarts from "echarts";
import { saveAs } from "file-saver";
import * as XLSX from "xlsx";
import {
  Dangerdevived,
  Dangerdevived2,
  Getshuikudata,
  Getshuizhidata,
  Getbaoyudata,
  Getweathersevendata,
  getsevenweather,
  getvideo,
  getshuikudata2,
  getsevenweather2,
  getshuikudata3,
  getdangerdevivedsse,
  getgaojinAll,
} from "@/api/index";
import moment from "moment";
import { useStore } from "vuex";
import Timer from "./time.vue";
// import { throttle } from 'lodash';
import {
  ref,
  reactive,
  onUnmounted,
  computed,
  h,
  onMounted,
  watch,
  shallowRef,
} from "vue";
import MyCharts from "@/components/echarts/index.vue";
import Header from "./header.vue";
import { useRouter } from "vue-router";
import Timeline from "./timeline2.vue";
import ShenYaJi from "./shenyaji.vue";
import ShenLiuJi from "./shenliuji.vue";
import YuShuiQing from "./yushuiqing.vue";
import Bxjc from "./bxjc.vue";
import Bxjcy from "./bxjcy.vue";
import Shuiweiji from "./shuiweiji.vue";
import VideoVue from "./video.vue";
let boolshow2 = ref(false);
let boolshow = ref(false);
let hongshuiyugaotext = ref(
  "2024年12月2日 16:03:04，即将入库100m³水，请注意防范。"
);
let shuizhigaojingtext = ref("");
let shuizhigaojingtime = ref("");
let timeoutval = ref(null);
let timeoutval2 = ref(null);
let timeoutval3 = ref(null);
let gaojingtitlered = ref("");
let viewportshow = ref(true);
let videoRef = ref(null);
let itemIsshow = ref(true);
let itemIsshow2 = ref(true);
let xunjianshow = ref(false);
let levelwatershow = ref(false);
let isshowbutton = ref(false);
let buttonl = ref(false);
let warnContent1 = ref("");
let warnTimeStr = ref("");
let gaojinclick = ref(false);
let gaojinclick3 = ref(false);
let gaojinclick4 = ref(false);
let gaojingIsshow = ref(false);
let gaojingIsshow2 = ref(false);
let yibanbaojing = ref(false);
let waterheight = ref(null);
let watertime = ref(null);
const store = useStore();
let shuizhabutton = ref(false);
let intervalll = ref(null);
let week = ref([
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日",
]);
let windspeed = ref(["2级", "3级", "3级", "3级", "3级", "3级", "3级"]);
let textDayOp = ref(["晴", "多云", "阴", "大雨", "中雪", "暴雪", "暴雨"]);
let high = ref(["24", "30", "33", "31", "36", "37", "33"]);
let low = ref(["15", "19", "10", "13", "11", "12", "17"]);
let status = ref("关");
let allkr = ref("");
let myChart = shallowRef(null);
let percentage = ref(20);
let elTableyy = ref("");
let isabled = ref(true);
let isabled2 = ref(false);
let shuiwei = ref(20);
let interval = ref(null);
let screenWidth = ref(0);
const router = useRouter();
let total = ref(10);
let page = ref(1);
let timer1 = ref("");
let timer2 = ref("");
let timeh = ref("");
let moveX = ref(0);
let value1 = ref(false);
let value2 = ref(false);
let rightVisible = ref(false);
timer1.value = moment().format("YYYY MM-DD") + " 00:00";
timer2.value = moment().format("YYYY MM-DD") + " 23:59";
interval.value = setInterval(() => {
  if (moment().format("HH:00") == "07:00") {
    timeh.value = 4;
  } else if (moment().format("HH:00") == "12:00") {
    timeh.value = 9;
  } else if (moment().format("HH:00") == "17:00") {
    timeh.value = 14;
  } else if (moment().format("HH:00") == "22:00") {
    timeh.value = 19;
  } else {
    timeh.value = Number(
      Object.keys(data.timelineData).filter(
        (key) => data.timelineData[key] == moment().format("HH:00")
      )[0]
    );
  }
}, 300000);
async function getdanger() {
  // Dangerdevived({ startTime: "2024-11-21", endTime: "2024-11-22" }).then(
  //   (res) => {
  //     // console.log(res.data);
  //     data.tableData = res.data.reverse();
  //   }
  // );
  const res = await getgaojinAll({ page: page.value, size: 10 });
  // console.log(JSON.parse(res.data.records[0].content));
  res.data.records.forEach((item, index) => {
    item.content = JSON.parse(item.content);
  });
  total.value = res.data.total;
  data.tableData = res.data.records;
}
function handleCurrentChange(e) {
  // console.log(e);
  page.value = e;
  getgaojinAll({ page: page.value, size: 10 }).then((res) => {
    // console.log(JSON.parse(res.data.records[0].content));
    res.data.records.forEach((item, index) => {
      item.content = JSON.parse(item.content);
    });
    total.value = res.data.total;
    data.tableData = res.data.records;
  });
}
// const getshuikudata = async () => {
//   let res = await Getshuikudata({});
//   allkr.value = parseFloat(res.data[0].totCap * 10000);
//   // console.log(allkr.value);
// };
function sevenweather() {
  getsevenweather().then((res) => {
    if (res.result.dailyFcsts.length !== 0) {
      week.value = res.result.dailyFcsts.map((item) => item.week);
      windspeed.value = res.result.dailyFcsts.map((item, index) => item.wc_day);
      textDayOp.value = res.result.dailyFcsts.map(
        (item, index) => item.text_day
      );
      high.value = res.result.dailyFcsts.map((item, index) => item.high);
      low.value = res.result.dailyFcsts.map((item, index) => item.low);
    }
  });
}
// function getshuizhidata() {
//   Getshuizhidata({}).then((res) => {
//     // console.log(res.data);
//     data.waterquiltyList[0].val = res.data.wimp;
//     data.waterquiltyList[1].val = res.data.dox;
//     data.waterquiltyList[2].val = res.data.ph;
//     data.waterquiltyList[3].val = res.data.cond;
//     data.waterquiltyList[4].val = res.data.turb;
//   });
// }
let isClicked = false;
let timer = null;

let isClicked3 = false;
let timer3 = null;

let isClicked4 = false;
let timer4 = null;

const changezm = (item, index) => {
  // console.log(item);
  if (item.text == "闸1") {
    if (!isClicked) {
      // console.log(item.text);
      item.show = !item.show;
      isClicked = true;
      clearTimeout(timer); // 清除之前的延时
      timer = setTimeout(() => {
        isClicked = false;
      }, 5000);
      if (item.show == true) {
        // console.log(item.text);
        window.ue4("zham1", {
          status: 0.8,
        });
      } else {
        window.ue4("zham1", {
          status: 0,
        });
      }
    }
  } else if (item.text == "闸2") {
    if (!isClicked3) {
      // console.log(item.text);
      item.show = !item.show;
      isClicked3 = true;
      clearTimeout(timer3); // 清除之前的延时
      timer3 = setTimeout(() => {
        isClicked3 = false;
      }, 5000);
      if (item.show == true) {
        window.ue4("zham2", {
          status: 0.8,
        });
      } else {
        window.ue4("zham2", {
          status: 0,
        });
      }
    }
  } else if (item.text == "闸3") {
    if (!isClicked4) {
      // console.log(item.text);
      item.show = !item.show;
      isClicked4 = true;
      clearTimeout(timer4); // 清除之前的延时
      timer4 = setTimeout(() => {
        isClicked4 = false;
      }, 5000);
      if (item.show == true) {
        window.ue4("zham3", {
          status: 0.8,
        });
      } else {
        window.ue4("zham3", {
          status: 0,
        });
      }
    }
  } else if (item.text == "总开关") {
    data.zmlist.forEach((el, nu) => {
      if (el.text != "总开关") {
        el.show = false;
      }
    });
    item.show = true;
    window.ue4("zham3", {
      status: 0,
    });
    window.ue4("zham2", {
      status: 0,
    });
    window.ue4("zham1", {
      status: 0,
    });
    setTimeout(() => {
      item.show = false;
    }, 200);
  }
};

ue.interface.zongzhamen = function () {
  window.ue4("zham3", {
    status: 0,
  });
  window.ue4("zham2", {
    status: 0,
  });
  window.ue4("zham1", {
    status: 0,
  });
};
function getbaoyudata() {
  let type = data.threelist.find((item) => item.show == true).type;
  // console.log(type);
  Getbaoyudata({ type }).then((res) => {
    // console.log(res.result);
    data.dataSource.xAxis[0].data = res.result.map((item) =>
      item.time.slice(5, 16)
    );
    data.dataSource.xAxis[1].data = res.result.map((item) =>
      item.time.slice(5, 16)
    );
    data.dataSource.series[0].data = res.result.map((item) => item.rainfall);
    data.dataSource.series[1].data = res.result.map((item) => item.waterLevel);
  });
}
function init() {
  myChart.value = echarts.init(document.getElementById("echarts"));
  // 绘制图表
  myChart.value.setOption(data.dataSource);

  myChart.value.on("click", function (params) {
    // 处理点击事件
    if (params.seriesName == "水位(m)") {
      console.log(params.data);
      data.events2 = {
        "pointer-events": "none",
      };
      setTimeout(() => {
        data.events2 = {};
      }, 5100);
      window.ue4("FloodingSimulation", {
        WaterLevel: params.data,
      });
    }
  });
}
const resizeChart = () => {
  if (myChart.value) {
    myChart.value.resize();
  }
};
watch(low, (newval, old) => {
  data.dataSourceWeather.series[1] = {
    name: "最低气温",
    type: "line",
    data: low.value,
    symbol: "circle",
    symbolSize: myEchartsFontSize(6),
    showSymbol: true,
    smooth: true,
    itemStyle: {
      normal: {
        color: "#ffffff",
      },
    },
    label: {
      show: true,
      color: "#ffffff",
      fontSize: myEchartsFontSize(15),
      position: "bottom",
      // color: 'white',
      formatter: "{c} °C",
    },
    lineStyle: {
      width: myEchartsFontSize(1),
      color: "#ffffff",
    },
    areaStyle: {
      opacity: 1,
      color: "transparent",
    },
  };
});
function myEchartsFontSize(value) {
  const result = value * (screenWidth.value / 1920);
  return result;
}
// 屏幕变化的时候echarts里面的随着变化
watch(screenWidth, (newval, old) => {
  data.dataSourceWeather.series[1] = {
    name: "最低气温",
    type: "line",
    data: low.value,
    symbol: "circle",
    symbolSize: myEchartsFontSize(6),
    showSymbol: true,
    smooth: true,
    itemStyle: {
      normal: {
        color: "#ffffff",
      },
    },
    label: {
      show: true,
      color: "#ffffff",
      fontSize: myEchartsFontSize(15),
      position: "bottom",
      // color: 'white',
      formatter: "{c} °C",
    },
    lineStyle: {
      width: myEchartsFontSize(1),
      color: "#ffffff",
    },
    areaStyle: {
      opacity: 1,
      color: "transparent",
    },
  };
  data.dataSourceWeather.series[0] = {
    name: "最高气温",
    type: "line",
    data: high.value,
    symbol: "circle",
    symbolSize: myEchartsFontSize(6),
    showSymbol: true,
    smooth: true,
    itemStyle: {
      normal: {
        color: "#ffffff",
      },
    },
    label: {
      color: "#ffffff",
      fontSize: myEchartsFontSize(15),
      show: true,
      position: "top",
      // offset: 10, // 设置标签相对于数据点的偏移量
      // color: 'white',
      formatter: "{c} °C",
    },
    lineStyle: {
      width: myEchartsFontSize(1),
      color: "#ffffff",
      // normal: {
      //   color: "#4c9bfd",

      //   shadowBlur: 10, // 阴影模糊度
      //   shadowColor: "rgba(76, 155, 253, 0.3)", // 阴影颜色
      // },
    },
    areaStyle: {
      opacity: 1,
      color: "transparent",
    },
  };
  data.dataSourceWeather.xAxis[2] = {
    type: "category",
    boundaryGap: false,
    position: "top",
    offset: myEchartsFontSize(-124), //偏移量，根据高度百分比偏移
    zlevel: 100,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      color: "#ffffff",
      fontSize: myEchartsFontSize(13),
      rich: {
        customStyle: {
          backgroundColor: {
            image: require("@/assets/image/fengli.png"), // 背景图片的 URL
            repeat: "no-repeat", // 是否重复，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            // height: 10,
            // width: 10, // 图片大小，可以设置为 'cover' 或者具体的宽高
            // position: [-40, -40], // 图片位置，第一个值是水平方向，第二个值是垂直方向
            // size: 13,
          },
          color: "#fff", // 文字颜色
          width: myEchartsFontSize(13),
          height: myEchartsFontSize(13),
        },
      },

      formatter: function (value) {
        return "{customStyle|" + "}" + "" + value;
      },
    },
    nameTextStyle: {},
    data: windspeed.value,
  };
  data.dataSourceWeather.xAxis[0] = {
    type: "category",
    boundaryGap: false,
    position: "top",
    offset: myEchartsFontSize(48), //偏移量，根据高度百分比偏移
    zlevel: 100,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: ["{a|{value}}"].join("\n"),
      rich: {
        a: {
          color: "white",
          fontSize: myEchartsFontSize(12),
        },
      },
    },
    nameTextStyle: {
      // color: "#ffffff",
    },

    data: week.value,
  };
  data.dataSourceWeather.xAxis[1] = {
    type: "category",
    boundaryGap: false,
    position: "top",
    offset: myEchartsFontSize(-20), //偏移量，根据高度百分比偏移
    zlevel: 100,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: function (value, index) {
        return "{" + index + "| }\n{b|" + value + "}";
      },
      rich: {
        0: {
          backgroundColor: {
            image: (() => {
              const index = 0; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        1: {
          backgroundColor: {
            image: (() => {
              const index = 1; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        2: {
          backgroundColor: {
            image: (() => {
              const index = 2; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        3: {
          backgroundColor: {
            image: (() => {
              const index = 3; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        4: {
          backgroundColor: {
            image: (() => {
              const index = 4; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        5: {
          backgroundColor: {
            image: (() => {
              const index = 5; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        6: {
          backgroundColor: {
            image: (() => {
              const index = 6; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        b: {
          // color: 'white',
          fontSize: myEchartsFontSize(12),
          lineHeight: myEchartsFontSize(30),
          height: myEchartsFontSize(20),
        },
      },
    },
    nameTextStyle: {
      fontWeight: "bold",
      fontSize: myEchartsFontSize(19),
    },
    // data: data.textDayOp,
    data: ["", "", "", "", "", "", ""],
  };
});
watch(high, (newval, old) => {
  data.dataSourceWeather.series[0] = {
    name: "最高气温",
    type: "line",
    data: high.value,
    symbol: "circle",
    symbolSize: myEchartsFontSize(6),
    showSymbol: true,
    smooth: true,
    itemStyle: {
      normal: {
        color: "#ffffff",
      },
    },
    label: {
      color: "#ffffff",
      fontSize: myEchartsFontSize(15),
      show: true,
      position: "top",
      // offset: 10, // 设置标签相对于数据点的偏移量
      // color: 'white',
      formatter: "{c} °C",
    },
    lineStyle: {
      width: myEchartsFontSize(1),
      color: "#ffffff",
      // normal: {
      //   color: "#4c9bfd",

      //   shadowBlur: 10, // 阴影模糊度
      //   shadowColor: "rgba(76, 155, 253, 0.3)", // 阴影颜色
      // },
    },
    areaStyle: {
      opacity: 1,
      color: "transparent",
    },
  };
});
watch(windspeed, (newval, old) => {
  data.dataSourceWeather.xAxis[2] = {
    type: "category",
    boundaryGap: false,
    position: "top",
    offset: myEchartsFontSize(-124), //偏移量，根据高度百分比偏移
    zlevel: 100,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      color: "#ffffff",
      fontSize: myEchartsFontSize(13),
      rich: {
        customStyle: {
          backgroundColor: {
            image: require("@/assets/image/fengli.png"), // 背景图片的 URL
            repeat: "no-repeat", // 是否重复，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            // height: 10,
            // width: 10, // 图片大小，可以设置为 'cover' 或者具体的宽高
            // position: [-40, -40], // 图片位置，第一个值是水平方向，第二个值是垂直方向
            // size: 13,
          },
          color: "#fff", // 文字颜色
          width: myEchartsFontSize(13),
          height: myEchartsFontSize(13),
        },
      },

      formatter: function (value) {
        return "{customStyle|" + "}" + "" + value;
      },
    },
    nameTextStyle: {},
    data: windspeed.value,
  };
});
watch(week, (newVal, old) => {
  data.dataSourceWeather.xAxis[0] = {
    type: "category",
    boundaryGap: false,
    position: "top",
    offset: myEchartsFontSize(48), //偏移量，根据高度百分比偏移
    zlevel: 100,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: ["{a|{value}}"].join("\n"),
      rich: {
        a: {
          color: "white",
          fontSize: myEchartsFontSize(12),
        },
      },
    },
    nameTextStyle: {
      // color: "#ffffff",
    },

    data: week.value,
  };
});
watch(textDayOp, (newval, oldval) => {
  data.dataSourceWeather.xAxis[1] = {
    type: "category",
    boundaryGap: false,
    position: "top",
    offset: myEchartsFontSize(-20), //偏移量，根据高度百分比偏移
    zlevel: 100,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: function (value, index) {
        return "{" + index + "| }\n{b|" + value + "}";
      },
      rich: {
        0: {
          backgroundColor: {
            image: (() => {
              const index = 0; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        1: {
          backgroundColor: {
            image: (() => {
              const index = 1; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        2: {
          backgroundColor: {
            image: (() => {
              const index = 2; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        3: {
          backgroundColor: {
            image: (() => {
              const index = 3; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        4: {
          backgroundColor: {
            image: (() => {
              const index = 4; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        5: {
          backgroundColor: {
            image: (() => {
              const index = 5; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        6: {
          backgroundColor: {
            image: (() => {
              const index = 6; // 图片序号
              const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
              if (weather === "晴") {
                return require("@/assets/image/晴.png");
              } else if (weather === "多云") {
                return require("@/assets/image/多云.png");
              } else if (weather === "阴") {
                return require("@/assets/image/阴.png");
              } else if (weather === "雨") {
                return require("@/assets/image/雨.png");
              } else if (weather === "小雨") {
                return require("@/assets/image/小雨.png");
              } else if (weather === "中雨") {
                return require("@/assets/image/中雨.png");
              } else if (weather === "雨夹雪") {
                return require("@/assets/image/雨夹雪.png");
              } else if (weather === "雷阵雨伴有冰雹") {
                return require("@/assets/image/雷阵雨伴有冰雹.png");
              } else if (weather === "大雨") {
                return require("@/assets/image/大雨.png");
              } else if (weather === "暴雨") {
                return require("@/assets/image/暴雨.png");
              } else if (weather === "雷阵雨") {
                return require("@/assets/image/雷阵雨.png");
              } else if (weather === "雪") {
                return require("@/assets/image/雪.png");
              } else if (weather === "小雪") {
                return require("@/assets/image/小雪.png");
              } else if (weather === "中雪") {
                return require("@/assets/image/中雪.png");
              } else if (weather === "大雪") {
                return require("@/assets/image/大雪.png");
              } else if (weather === "暴雪") {
                return require("@/assets/image/暴雪.png");
              } else if (weather === "阵雨") {
                return require("@/assets/image/阵雨.png");
              } else if (weather === "大风") {
                return require("@/assets/image/大风.png");
              } else if (weather === "雾") {
                return require("@/assets/image/雾.png");
              } else if (weather === "霾") {
                return require("@/assets/image/霾.png");
              } else if (weather === "浮尘") {
                return require("@/assets/image/浮尘.png");
              } else if (weather === "沙尘") {
                return require("@/assets/image/沙尘暴.png");
              } else if (weather === "沙尘暴") {
                return require("@/assets/image/沙尘暴.png");
              }
            })(),
          },
          height: myEchartsFontSize(30),
          width: myEchartsFontSize(30),
        },
        b: {
          // color: 'white',
          fontSize: myEchartsFontSize(12),
          lineHeight: myEchartsFontSize(30),
          height: myEchartsFontSize(20),
        },
      },
    },
    nameTextStyle: {
      fontWeight: "bold",
      fontSize: myEchartsFontSize(19),
    },
    // data: data.textDayOp,
    data: ["", "", "", "", "", "", ""],
  };
});
onMounted(() => {
  screenWidth.value = window.innerWidth;
  // getshuikudata();
  init();
  window.addEventListener("resize", resizeChart);
  // 监听窗口大小变化以更新屏幕宽度
  window.addEventListener("resize", () => {
    screenWidth.value = window.innerWidth;
  });
  getdanger();
  sevenweather();
  // getbaoyudata();
  // getweatherseven();
  if (moment().format("HH:00") == "07:00") {
    timeh.value = 4;
  } else if (moment().format("HH:00") == "12:00") {
    timeh.value = 9;
  } else if (moment().format("HH:00") == "17:00") {
    timeh.value = 14;
  } else if (moment().format("HH:00") == "22:00") {
    timeh.value = 19;
  } else {
    timeh.value = Number(
      Object.keys(data.timelineData).filter(
        (key) => data.timelineData[key] == moment().format("HH:00")
      )[0]
    );
  }
});
onUnmounted(() => {
  // 清理资源
  if (myChart.value) {
    myChart.value.dispose();
  }
  window.removeEventListener("resize", resizeChart);
  clearInterval(interval.value);
  // clearInterval(intervalll.value);
  interval.value = "";
  // intervalll.value = "";
});
const changetime = () => {
  // console.log(value1.value);
  if (value1.value) {
    isabled.value = false;
    data.events = {};
  } else {
    isabled.value = true;
    data.events = {
      "pointer-events": "none",
    };
    data.weatherdata.forEach((item, index) => {
      item.show = false;
    });
    if (moment().format("HH:00") == "07:00") {
      timeh.value = 4;
    } else if (moment().format("HH:00") == "12:00") {
      timeh.value = 9;
    } else if (moment().format("HH:00") == "17:00") {
      timeh.value = 14;
    } else if (moment().format("HH:00") == "22:00") {
      timeh.value = 19;
    } else {
      timeh.value = Number(
        Object.keys(data.timelineData).filter(
          (key) => data.timelineData[key] == moment().format("HH:00")
        )[0]
      );
    }
  }
};
const changevents = () => {
  if (value2.value) {
    data.events2 = {};
    isabled2.value = true;
    window.ue4("suibian", {
      text: "suibian",
    });
  } else {
    isabled2.value = false;
    data.events2 = {
      "pointer-events": "none",
    };
  }
};
let guideMarks = computed(() => {
  let marks = {};
  for (let i = 0; i <= 160; i++) {
    if (i % 20 == 0) {
      marks[i] = i + "";
    } else if (i % 4 == 0) {
      marks[i] = {
        style: {
          color: "#ccc",
        },
        label: h("span", "|"),
      };
    }
  }
  return marks;
});
const videoSrc = ref(require("@/assets/image/abc.mp4"));
const toggle = () => {
  rightVisible.value = !rightVisible.value;
  if (rightVisible.value) {
    // this.backshow = true
    moveX.value = 100;
    // this.moveX1 = 428
    // this.moveX2 = 520
    // this.isMove = true
  } else {
    // this.backshow = false
    moveX.value = 0;
    // this.moveX1 = 0
    // this.moveX2 = 0
    // this.isMove = false
  }
};
let data = reactive({
  xunjianxianlu: [
    { text: "大坝巡检", show: false, show2: false, show3: false },
    { text: "泄洪闸巡检", show: false, show2: false, show3: false },
    { text: "下游泄洪道巡检", show: false, show2: false, show3: false },
  ],
  zmlist: [
    {
      text: "闸1",
      show: false,
      icon: require("@/assets/image/zmgb.png"),
      activeicon: require("@/assets/image/zmdk.png"),
      value: 80,
      disableshow: false,
    },
    {
      text: "闸2",
      show: false,
      icon: require("@/assets/image/zmgb.png"),
      activeicon: require("@/assets/image/zmdk.png"),
      value: 80,
      disableshow: false,
    },
    {
      text: "闸3",
      show: false,
      icon: require("@/assets/image/zmgb.png"),
      activeicon: require("@/assets/image/zmdk.png"),
      value: 80,
      disableshow: false,
    },
    {
      text: "总开关",
      show: false,
      icon: require("@/assets/image/zmgb.png"),
      activeicon: require("@/assets/image/zmdk.png"),
      value: 80,
      disableshow: false,
    },
  ],
  threelist: [
    { text: "未来24h", show: true, type: "1" },
    { text: "未来3天", show: false, type: "2" },
    { text: "未来7天", show: false, type: "3" },
  ],
  events: {
    "pointer-events": " none",
  },
  events2: {
    "pointer-events": " none",
  },
  playerOptions: {
    // height: 200,
    // width: 400, //播放器宽度
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
    autoplay: "any", // 如果true,浏览器准备好时开始回放。
    muted: true, // 默认情况下将会消除任何音频。
    loop: true, // 导致视频一结束就重新开始。
    preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controls: true,
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true, // 全屏按钮
    },
  },
  waterimgList: [
    {
      img: require("@/assets/image/rj.png"),
      text: "实时库容",
      val: "150m³",
    },
    {
      img: require("@/assets/image/mj.png"),
      text: "出库流量",
      val: "300km²",
    },

    {
      img: require("@/assets/image/sw.png"),
      text: "实时水位",
      val: "20m",
    },
  ],
  waterquiltyList: [
    {
      class: "back1",
      img: require("@/assets/image/wd.png"),
      text: "温度℃",
      val: "25.6",
    },
    {
      class: "back2",
      img: require("@/assets/image/rjy.png"),
      text: "溶解氧mg/L",
      val: "2.94",
    },
    {
      class: "back3",
      img: require("@/assets/image/ph.png"),
      text: "PH值",
      val: "7.23",
    },
    {
      class: "back4",
      img: require("@/assets/image/ddl.png"),
      text: "电导率us/cm",
      val: "25.6",
    },
    {
      class: "back5",
      img: require("@/assets/image/zd.png"),
      text: "浊度NTU",
      val: "567",
    },
  ],
  tableData: [
    {
      warnLevel: 1,
      content: {
        warnLevel: 1,
        warnContent: "水位超过123米",
      },
      title: "水位超过123米",
      // warnContent: "一般",
      warnTime: "2024-10-22 15:15:26",
    },
    {
      warnLevel: 1,
      content: {
        warnLevel: 1,
        warnContent: "水位超过123米",
      },
      title: "水位超过123米",
      warnTime: "2024-10-22 15:15:26",
    },
    {
      warnLevel: 1,
      content: {
        warnLevel: 1,
        warnContent: "水位超过123米",
      },
      title: "水位超过123米",
      warnTime: "2024-10-22 15:15:26",
    },
    {
      warnLevel: 1,
      content: {
        warnLevel: 1,
        warnContent: "水位超过123米",
      },
      title: "水位超过123米",
      warnTime: "2024-10-22 15:15:26",
    },
    {
      warnLevel: 1,
      content: {
        warnLevel: 1,
        warnContent: "水位超过123米",
      },
      title: "水位超过123米",
      warnTime: "2024-10-22 15:15:26",
    },
    {
      warnLevel: 1,
      content: {
        warnLevel: 1,
        warnContent: "水位超过123米",
      },
      title: "水位超过123米",
      warnTime: "2024-10-22 15:15:26",
    },
  ],
  weatherdata: [
    {
      topimg: require("@/assets/image/jt.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "晴天",
      show: false,
    },
    {
      topimg: require("@/assets/image/dyy.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "多云",
      show: false,
    },
    {
      topimg: require("@/assets/image/yt.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "阴天",
      show: false,
    },
    {
      topimg: require("@/assets/image/dw.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "大雾",
      show: false,
    },
    {
      topimg: require("@/assets/image/xy.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "小雨",
      show: false,
    },
    {
      topimg: require("@/assets/image/dy.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "大雨",
      show: false,
    },
    {
      topimg: require("@/assets/image/xx.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "小雪",
      show: false,
    },
    {
      topimg: require("@/assets/image/dx.png"),
      bottomimg: require("@/assets/image/z8.png"),
      img2: require("@/assets/image/wxzt21.png"),
      img3: require("@/assets/image/wxzty.png"),
      img4: require("@/assets/image/wxzz41.png"),
      img5: require("@/assets/image/wxzz23.png"),
      activeimg2: require("@/assets/image/xzz21.png"),
      activeimg3: require("@/assets/image/xzty.png"),
      activeimg4: require("@/assets/image/xzz41.png"),
      activeimg5: require("@/assets/image/xzz23.png"),
      activebottomimg: require("@/assets/image/xzdz.png"),
      text: "大雪",
      show: false,
    },
  ],
  activities: [
    {
      timestamp: "早晨",
      color: "#C0E7FA",
      process: 0,
    },
    {
      timestamp: "中午",
      color: "#C0E7FA",
      process: 33,
    },
    {
      timestamp: "傍晚",
      color: "#C0E7FA",
      process: 66,
    },
    {
      timestamp: "夜间",
      color: "#C0E7FA",
      process: 100,
    },
  ],
  dataSource: {
    title: {
      text: "Rainfall vs Evaporation",
      left: "center",
      show: false,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        animation: true,
      },
    },
    legend: {
      data: ["Evaporation", "Rainfall"],
      left: 10,
      show: false,
    },
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        restore: {},
        saveAsImage: {},
      },
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: "all",
        },
      ],
    },
    grid: [
      {
        height: "26%",
        left: "10%",
        right: "5%",
        top: "25%",
        // bottom: "80%",
      },
      {
        height: "30%",
        left: "10%",
        right: "5%",
        top: "62%",
        // bottom: "12%",
      },
    ],
    xAxis: [
      {
        type: "category",
        // show:false,
        boundaryGap: true,
        axisLine: {
          onZero: true,
          lineStyle: {
            color: "#3F98BA",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: { show: false },
        data: [
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
          " 0:00",
          " 1:00",
        ],
      },
      {
        gridIndex: 1,
        type: "category",
        boundaryGap: true,
        // axisLine: { onZero: true },
        axisLine: {
          onZero: true,
          lineStyle: {
            color: "#3F98BA",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: { color: "#ffffff" },
        data: [
          "2:00",
          "3:00",
          "4:00",
          "5:00",
          "6:00",
          "7:00",
          "8:00",
          "9:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
          "00:00",
          "01:00",
        ],
        position: "bottom",
      },
    ],
    yAxis: [
      {
        name: "雨量(mm)",
        boundaryGap: [0, "50%"],
        nameLocation: "start",
        nameTextStyle: {
          color: "#ffffff",
          // verticalAlign: "",
          // padding: [-5, 50, 0, 0],
        },
        type: "value",
        inverse: true, // 这使得这个y轴的坐标轴倒立
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3F98BA",
            width: 1,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#3B3F37",
          },
        },
        axisLabel: {
          color: "#ffffff",
        },
      },
      {
        gridIndex: 1,
        name: "水位(m)",
        boundaryGap: [0, "50%"],
        nameLocation: "end",
        nameTextStyle: {
          color: "#ffffff",
          verticalAlign: "bottom",
          // padding: [0, 34, 128, 0],
        },
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3F98BA",
            width: 1,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#3B3F37",
            width: 1,
          },
        },
        axisLabel: {
          color: "#ffffff",
        },
      },
    ],
    series: [
      {
        name: "雨量(mm)",
        type: "line",
        symbolSize: 0,

        lineStyle: {
          width: 1,
          color: "#00B1CE",
        },
        itemStyle: {
          borderWidth: 0,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          normal: {
            color: "#00B1CE",
          },
        },
        data: [
          3, 1, 3, 4, 2, 3, 5, 0, 5, 6, 7, 8, 3, 1, 4, 5, 2, 4, 5, 6, 6, 7, 3,
          3,
        ],
      },
      {
        name: "水位(m)",
        type: "line",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbolSize: 0,
        lineStyle: {
          width: 2,
          color: "#3E88B6",
          type: "dashed",
        },
        itemStyle: {
          borderWidth: 0,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          // show:false,
          normal: {
            color: "#00B1CE",
            opacity: 0,
          },
        },
        // markArea: {
        //   silent: true,
        //   itemStyle: {
        //     color: "#00B1CE",
        //     opacity: 1,
        //   },
        // },
        data: [
          0, 6, 20, 5, 9, 4, 9, 4, 4, 24, 14, 9, 4, 19, 14, 4, 4, 9, 4, 14, 9,
          24, 12, 4,
        ],
      },
    ],
  },
  bottomdata: [
    {
      text: "场景切换",
      show: false,
      showlabel: false,
      selectlist: [
        { text: "主坝", show: false },
        { text: "泄洪道", show: false },
        { text: "管理处", show: false },
        { text: "水电站", show: false },
        { text: "输水洞", show: false },
        { text: "泄洪闸", show: false },
      ],
    },
    {
      text: "设备管理",
      show: false,
      showlabel: false,
      selectlist: [
        // { text: "泄洪闸", show: false },
        { text: "水雨情", show: true },
        { text: "渗流计", show: true },
        { text: "渗压计", show: true },
        { text: "水位计", show: true },
        { text: "摄像头", show: true },
        { text: "位移设备", show: true },
      ],
    },
    {
      text: "巡检展示",
      show: false,
      showlabel: false,
      selectlist: [
        // { text: "巡检漫游", show: false },
        // { text: "巡检线路", show: false },
        // { text: "巡检1", show: false },
        // { text: "巡检2", show: false },
        // { text: "巡检3", show: false },
      ],
    },
    {
      text: "淹没模拟",
      showlabel: false,
      show: false,
    },
  ],
  wethericon: [
    {
      icon: require("@/assets/image/wjt.png"),
      val: "25℃",
    },
    {
      icon: require("@/assets/image/wsd.png"),
      val: "湿度:45%RH",
    },
    {
      icon: require("@/assets/image/wjy.png"),
      val: "降雨:1.3mm",
    },
  ],
  timelineData: {
    0: "03:00",
    1: "04:00",
    2: "05:00",
    3: "06:00",
    4: "早晨",
    5: "08:00",
    6: "09:00",
    7: "10:00",
    8: "11:00",
    9: "中午",
    10: "13:00",
    11: "14:00",
    12: "15:00",
    13: "16:00",
    14: "傍晚",
    15: "18:00",
    16: "19:00",
    17: "20:00",
    18: "21:00",
    19: "夜间",
    20: "23:00",
    21: "24:00",
    22: "01:00",
    23: "02:00",
  },
  // textDayOp: ["晴", "多云", "阴", "大雨", "中雪", "暴雪", "暴雨"],
  dataSourceWeather: {
    grid: {
      show: true,
      backgroundColor: "transparent",
      opacity: 0.3,
      borderWidth: "0",
      top: "40%",
      bottom: "25%",
      left: "6%",
      right: "6%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "transparent",
        },
      },
    },
    legend: {
      show: false,
    },
    xAxis: [
      // 日期
      {
        type: "category",
        boundaryGap: false,
        position: "top",
        offset: myEchartsFontSize(48), //偏移量，根据高度百分比偏移
        zlevel: 100,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          formatter: ["{a|{value}}"].join("\n"),
          rich: {
            a: {
              color: "white",
              fontSize: myEchartsFontSize(12),
            },
          },
        },
        nameTextStyle: {
          // color: "#ffffff",
        },

        data: week.value,
      },
      // 天气图标
      {
        type: "category",
        boundaryGap: false,
        position: "top",
        offset: myEchartsFontSize(-20), //偏移量，根据高度百分比偏移
        zlevel: 100,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          formatter: function (value, index) {
            return "{" + index + "| }\n{b|" + value + "}";
          },
          rich: {
            0: {
              backgroundColor: {
                image: (() => {
                  const index = 0; // 图片序号
                  const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
                  if (weather === "晴") {
                    return require("@/assets/image/晴.png");
                  } else if (weather === "多云") {
                    return require("@/assets/image/多云.png");
                  } else if (weather === "阴") {
                    return require("@/assets/image/阴.png");
                  } else if (weather === "雨") {
                    return require("@/assets/image/雨.png");
                  } else if (weather === "小雨") {
                    return require("@/assets/image/小雨.png");
                  } else if (weather === "中雨") {
                    return require("@/assets/image/中雨.png");
                  } else if (weather === "雨夹雪") {
                    return require("@/assets/image/雨夹雪.png");
                  } else if (weather === "雷阵雨伴有冰雹") {
                    return require("@/assets/image/雷阵雨伴有冰雹.png");
                  } else if (weather === "大雨") {
                    return require("@/assets/image/大雨.png");
                  } else if (weather === "暴雨") {
                    return require("@/assets/image/暴雨.png");
                  } else if (weather === "雷阵雨") {
                    return require("@/assets/image/雷阵雨.png");
                  } else if (weather === "雪") {
                    return require("@/assets/image/雪.png");
                  } else if (weather === "小雪") {
                    return require("@/assets/image/小雪.png");
                  } else if (weather === "中雪") {
                    return require("@/assets/image/中雪.png");
                  } else if (weather === "大雪") {
                    return require("@/assets/image/大雪.png");
                  } else if (weather === "暴雪") {
                    return require("@/assets/image/暴雪.png");
                  } else if (weather === "阵雨") {
                    return require("@/assets/image/阵雨.png");
                  } else if (weather === "大风") {
                    return require("@/assets/image/大风.png");
                  } else if (weather === "雾") {
                    return require("@/assets/image/雾.png");
                  } else if (weather === "霾") {
                    return require("@/assets/image/霾.png");
                  } else if (weather === "浮尘") {
                    return require("@/assets/image/浮尘.png");
                  } else if (weather === "沙尘") {
                    return require("@/assets/image/沙尘暴.png");
                  } else if (weather === "沙尘暴") {
                    return require("@/assets/image/沙尘暴.png");
                  }
                })(),
              },
              height: myEchartsFontSize(30),
              width: myEchartsFontSize(30),
            },
            1: {
              backgroundColor: {
                image: (() => {
                  const index = 1; // 图片序号
                  const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
                  if (weather === "晴") {
                    return require("@/assets/image/晴.png");
                  } else if (weather === "多云") {
                    return require("@/assets/image/多云.png");
                  } else if (weather === "阴") {
                    return require("@/assets/image/阴.png");
                  } else if (weather === "雨") {
                    return require("@/assets/image/雨.png");
                  } else if (weather === "小雨") {
                    return require("@/assets/image/小雨.png");
                  } else if (weather === "中雨") {
                    return require("@/assets/image/中雨.png");
                  } else if (weather === "雨夹雪") {
                    return require("@/assets/image/雨夹雪.png");
                  } else if (weather === "雷阵雨伴有冰雹") {
                    return require("@/assets/image/雷阵雨伴有冰雹.png");
                  } else if (weather === "大雨") {
                    return require("@/assets/image/大雨.png");
                  } else if (weather === "暴雨") {
                    return require("@/assets/image/暴雨.png");
                  } else if (weather === "雷阵雨") {
                    return require("@/assets/image/雷阵雨.png");
                  } else if (weather === "雪") {
                    return require("@/assets/image/雪.png");
                  } else if (weather === "小雪") {
                    return require("@/assets/image/小雪.png");
                  } else if (weather === "中雪") {
                    return require("@/assets/image/中雪.png");
                  } else if (weather === "大雪") {
                    return require("@/assets/image/大雪.png");
                  } else if (weather === "暴雪") {
                    return require("@/assets/image/暴雪.png");
                  } else if (weather === "阵雨") {
                    return require("@/assets/image/阵雨.png");
                  } else if (weather === "大风") {
                    return require("@/assets/image/大风.png");
                  } else if (weather === "雾") {
                    return require("@/assets/image/雾.png");
                  } else if (weather === "霾") {
                    return require("@/assets/image/霾.png");
                  } else if (weather === "浮尘") {
                    return require("@/assets/image/浮尘.png");
                  } else if (weather === "沙尘") {
                    return require("@/assets/image/沙尘暴.png");
                  } else if (weather === "沙尘暴") {
                    return require("@/assets/image/沙尘暴.png");
                  }
                })(),
              },
              height: myEchartsFontSize(30),
              width: myEchartsFontSize(30),
            },
            2: {
              backgroundColor: {
                image: (() => {
                  const index = 2; // 图片序号
                  const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
                  if (weather === "晴") {
                    return require("@/assets/image/晴.png");
                  } else if (weather === "多云") {
                    return require("@/assets/image/多云.png");
                  } else if (weather === "阴") {
                    return require("@/assets/image/阴.png");
                  } else if (weather === "雨") {
                    return require("@/assets/image/雨.png");
                  } else if (weather === "小雨") {
                    return require("@/assets/image/小雨.png");
                  } else if (weather === "中雨") {
                    return require("@/assets/image/中雨.png");
                  } else if (weather === "雨夹雪") {
                    return require("@/assets/image/雨夹雪.png");
                  } else if (weather === "雷阵雨伴有冰雹") {
                    return require("@/assets/image/雷阵雨伴有冰雹.png");
                  } else if (weather === "大雨") {
                    return require("@/assets/image/大雨.png");
                  } else if (weather === "暴雨") {
                    return require("@/assets/image/暴雨.png");
                  } else if (weather === "雷阵雨") {
                    return require("@/assets/image/雷阵雨.png");
                  } else if (weather === "雪") {
                    return require("@/assets/image/雪.png");
                  } else if (weather === "小雪") {
                    return require("@/assets/image/小雪.png");
                  } else if (weather === "中雪") {
                    return require("@/assets/image/中雪.png");
                  } else if (weather === "大雪") {
                    return require("@/assets/image/大雪.png");
                  } else if (weather === "暴雪") {
                    return require("@/assets/image/暴雪.png");
                  } else if (weather === "阵雨") {
                    return require("@/assets/image/阵雨.png");
                  } else if (weather === "大风") {
                    return require("@/assets/image/大风.png");
                  } else if (weather === "雾") {
                    return require("@/assets/image/雾.png");
                  } else if (weather === "霾") {
                    return require("@/assets/image/霾.png");
                  } else if (weather === "浮尘") {
                    return require("@/assets/image/浮尘.png");
                  } else if (weather === "沙尘") {
                    return require("@/assets/image/沙尘暴.png");
                  } else if (weather === "沙尘暴") {
                    return require("@/assets/image/沙尘暴.png");
                  }
                })(),
              },
              height: myEchartsFontSize(30),
              width: myEchartsFontSize(30),
            },
            3: {
              backgroundColor: {
                image: (() => {
                  const index = 3; // 图片序号
                  const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
                  if (weather === "晴") {
                    return require("@/assets/image/晴.png");
                  } else if (weather === "多云") {
                    return require("@/assets/image/多云.png");
                  } else if (weather === "阴") {
                    return require("@/assets/image/阴.png");
                  } else if (weather === "雨") {
                    return require("@/assets/image/雨.png");
                  } else if (weather === "小雨") {
                    return require("@/assets/image/小雨.png");
                  } else if (weather === "中雨") {
                    return require("@/assets/image/中雨.png");
                  } else if (weather === "雨夹雪") {
                    return require("@/assets/image/雨夹雪.png");
                  } else if (weather === "雷阵雨伴有冰雹") {
                    return require("@/assets/image/雷阵雨伴有冰雹.png");
                  } else if (weather === "大雨") {
                    return require("@/assets/image/大雨.png");
                  } else if (weather === "暴雨") {
                    return require("@/assets/image/暴雨.png");
                  } else if (weather === "雷阵雨") {
                    return require("@/assets/image/雷阵雨.png");
                  } else if (weather === "雪") {
                    return require("@/assets/image/雪.png");
                  } else if (weather === "小雪") {
                    return require("@/assets/image/小雪.png");
                  } else if (weather === "中雪") {
                    return require("@/assets/image/中雪.png");
                  } else if (weather === "大雪") {
                    return require("@/assets/image/大雪.png");
                  } else if (weather === "暴雪") {
                    return require("@/assets/image/暴雪.png");
                  } else if (weather === "阵雨") {
                    return require("@/assets/image/阵雨.png");
                  } else if (weather === "大风") {
                    return require("@/assets/image/大风.png");
                  } else if (weather === "雾") {
                    return require("@/assets/image/雾.png");
                  } else if (weather === "霾") {
                    return require("@/assets/image/霾.png");
                  } else if (weather === "浮尘") {
                    return require("@/assets/image/浮尘.png");
                  } else if (weather === "沙尘") {
                    return require("@/assets/image/沙尘暴.png");
                  } else if (weather === "沙尘暴") {
                    return require("@/assets/image/沙尘暴.png");
                  }
                })(),
              },
              height: myEchartsFontSize(30),
              width: myEchartsFontSize(30),
            },
            4: {
              backgroundColor: {
                image: (() => {
                  const index = 4; // 图片序号
                  const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
                  if (weather === "晴") {
                    return require("@/assets/image/晴.png");
                  } else if (weather === "多云") {
                    return require("@/assets/image/多云.png");
                  } else if (weather === "阴") {
                    return require("@/assets/image/阴.png");
                  } else if (weather === "雨") {
                    return require("@/assets/image/雨.png");
                  } else if (weather === "小雨") {
                    return require("@/assets/image/小雨.png");
                  } else if (weather === "中雨") {
                    return require("@/assets/image/中雨.png");
                  } else if (weather === "雨夹雪") {
                    return require("@/assets/image/雨夹雪.png");
                  } else if (weather === "雷阵雨伴有冰雹") {
                    return require("@/assets/image/雷阵雨伴有冰雹.png");
                  } else if (weather === "大雨") {
                    return require("@/assets/image/大雨.png");
                  } else if (weather === "暴雨") {
                    return require("@/assets/image/暴雨.png");
                  } else if (weather === "雷阵雨") {
                    return require("@/assets/image/雷阵雨.png");
                  } else if (weather === "雪") {
                    return require("@/assets/image/雪.png");
                  } else if (weather === "小雪") {
                    return require("@/assets/image/小雪.png");
                  } else if (weather === "中雪") {
                    return require("@/assets/image/中雪.png");
                  } else if (weather === "大雪") {
                    return require("@/assets/image/大雪.png");
                  } else if (weather === "暴雪") {
                    return require("@/assets/image/暴雪.png");
                  } else if (weather === "阵雨") {
                    return require("@/assets/image/阵雨.png");
                  } else if (weather === "大风") {
                    return require("@/assets/image/大风.png");
                  } else if (weather === "雾") {
                    return require("@/assets/image/雾.png");
                  } else if (weather === "霾") {
                    return require("@/assets/image/霾.png");
                  } else if (weather === "浮尘") {
                    return require("@/assets/image/浮尘.png");
                  } else if (weather === "沙尘") {
                    return require("@/assets/image/沙尘暴.png");
                  } else if (weather === "沙尘暴") {
                    return require("@/assets/image/沙尘暴.png");
                  }
                })(),
              },
              height: myEchartsFontSize(30),
              width: myEchartsFontSize(30),
            },
            5: {
              backgroundColor: {
                image: (() => {
                  const index = 5; // 图片序号
                  const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
                  if (weather === "晴") {
                    return require("@/assets/image/晴.png");
                  } else if (weather === "多云") {
                    return require("@/assets/image/多云.png");
                  } else if (weather === "阴") {
                    return require("@/assets/image/阴.png");
                  } else if (weather === "雨") {
                    return require("@/assets/image/雨.png");
                  } else if (weather === "小雨") {
                    return require("@/assets/image/小雨.png");
                  } else if (weather === "中雨") {
                    return require("@/assets/image/中雨.png");
                  } else if (weather === "雨夹雪") {
                    return require("@/assets/image/雨夹雪.png");
                  } else if (weather === "雷阵雨伴有冰雹") {
                    return require("@/assets/image/雷阵雨伴有冰雹.png");
                  } else if (weather === "大雨") {
                    return require("@/assets/image/大雨.png");
                  } else if (weather === "暴雨") {
                    return require("@/assets/image/暴雨.png");
                  } else if (weather === "雷阵雨") {
                    return require("@/assets/image/雷阵雨.png");
                  } else if (weather === "雪") {
                    return require("@/assets/image/雪.png");
                  } else if (weather === "小雪") {
                    return require("@/assets/image/小雪.png");
                  } else if (weather === "中雪") {
                    return require("@/assets/image/中雪.png");
                  } else if (weather === "大雪") {
                    return require("@/assets/image/大雪.png");
                  } else if (weather === "暴雪") {
                    return require("@/assets/image/暴雪.png");
                  } else if (weather === "阵雨") {
                    return require("@/assets/image/阵雨.png");
                  } else if (weather === "大风") {
                    return require("@/assets/image/大风.png");
                  } else if (weather === "雾") {
                    return require("@/assets/image/雾.png");
                  } else if (weather === "霾") {
                    return require("@/assets/image/霾.png");
                  } else if (weather === "浮尘") {
                    return require("@/assets/image/浮尘.png");
                  } else if (weather === "沙尘") {
                    return require("@/assets/image/沙尘暴.png");
                  } else if (weather === "沙尘暴") {
                    return require("@/assets/image/沙尘暴.png");
                  }
                })(),
              },
              height: myEchartsFontSize(30),
              width: myEchartsFontSize(30),
            },
            6: {
              backgroundColor: {
                image: (() => {
                  const index = 6; // 图片序号
                  const weather = textDayOp.value[index]; // 根据图片序号获取对应的天气数据
                  if (weather === "晴") {
                    return require("@/assets/image/晴.png");
                  } else if (weather === "多云") {
                    return require("@/assets/image/多云.png");
                  } else if (weather === "阴") {
                    return require("@/assets/image/阴.png");
                  } else if (weather === "雨") {
                    return require("@/assets/image/雨.png");
                  } else if (weather === "小雨") {
                    return require("@/assets/image/小雨.png");
                  } else if (weather === "中雨") {
                    return require("@/assets/image/中雨.png");
                  } else if (weather === "雨夹雪") {
                    return require("@/assets/image/雨夹雪.png");
                  } else if (weather === "雷阵雨伴有冰雹") {
                    return require("@/assets/image/雷阵雨伴有冰雹.png");
                  } else if (weather === "大雨") {
                    return require("@/assets/image/大雨.png");
                  } else if (weather === "暴雨") {
                    return require("@/assets/image/暴雨.png");
                  } else if (weather === "雷阵雨") {
                    return require("@/assets/image/雷阵雨.png");
                  } else if (weather === "雪") {
                    return require("@/assets/image/雪.png");
                  } else if (weather === "小雪") {
                    return require("@/assets/image/小雪.png");
                  } else if (weather === "中雪") {
                    return require("@/assets/image/中雪.png");
                  } else if (weather === "大雪") {
                    return require("@/assets/image/大雪.png");
                  } else if (weather === "暴雪") {
                    return require("@/assets/image/暴雪.png");
                  } else if (weather === "阵雨") {
                    return require("@/assets/image/阵雨.png");
                  } else if (weather === "大风") {
                    return require("@/assets/image/大风.png");
                  } else if (weather === "雾") {
                    return require("@/assets/image/雾.png");
                  } else if (weather === "霾") {
                    return require("@/assets/image/霾.png");
                  } else if (weather === "浮尘") {
                    return require("@/assets/image/浮尘.png");
                  } else if (weather === "沙尘") {
                    return require("@/assets/image/沙尘暴.png");
                  } else if (weather === "沙尘暴") {
                    return require("@/assets/image/沙尘暴.png");
                  }
                })(),
              },
              height: myEchartsFontSize(30),
              width: myEchartsFontSize(30),
            },
            b: {
              // color: 'white',
              fontSize: myEchartsFontSize(12),
              lineHeight: myEchartsFontSize(30),
              height: myEchartsFontSize(20),
            },
          },
        },
        nameTextStyle: {
          fontWeight: "bold",
          fontSize: myEchartsFontSize(19),
        },
        // data: data.textDayOp,
        data: ["", "", "", "", "", "", ""],
      },
      {
        type: "category",
        boundaryGap: false,
        position: "top",
        offset: myEchartsFontSize(-124), //偏移量，根据高度百分比偏移
        zlevel: 100,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "#ffffff",
          fontSize: myEchartsFontSize(13),
          rich: {
            customStyle: {
              backgroundColor: {
                image: require("@/assets/image/fengli.png"), // 背景图片的 URL
                repeat: "no-repeat", // 是否重复，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                // height: 10,
                // width: 10, // 图片大小，可以设置为 'cover' 或者具体的宽高
                // position: [-40, -40], // 图片位置，第一个值是水平方向，第二个值是垂直方向
                // size: 13,
              },
              color: "#fff", // 文字颜色
              width: myEchartsFontSize(13),
              height: myEchartsFontSize(13),
            },
          },

          formatter: function (value) {
            return "{customStyle|" + "}" + " " + value;
          },
        },
        nameTextStyle: {},
        data: windspeed.value,
      },
    ],
    yAxis: {
      type: "value",
      show: false,
      boundaryGap: [0, "50%"],
      axisLabel: {
        formatter: "{value} °C",
        color: "white",
      },
      splitLine: {
        show: true,
      },
    },
    series: [
      // 最高气温
      {
        name: "最高气温",
        type: "line",
        data: high.value,
        symbol: "circle",
        symbolSize: myEchartsFontSize(6),
        showSymbol: true,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#ffffff",
          },
        },
        label: {
          color: "#ffffff",
          fontSize: myEchartsFontSize(15),
          show: true,
          position: "top",
          // offset: 10, // 设置标签相对于数据点的偏移量
          // color: 'white',
          formatter: "{c} °C",
        },
        lineStyle: {
          width: myEchartsFontSize(1),
          color: "#ffffff",
          // normal: {
          //   color: "#4c9bfd",

          //   shadowBlur: 10, // 阴影模糊度
          //   shadowColor: "rgba(76, 155, 253, 0.3)", // 阴影颜色
          // },
        },
        areaStyle: {
          opacity: 1,
          color: "transparent",
        },
      },
      // 最低气温
      {
        name: "最低气温",
        type: "line",
        data: low.value,
        symbol: "circle",
        symbolSize: myEchartsFontSize(6),
        showSymbol: true,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#ffffff",
          },
        },
        label: {
          show: true,
          color: "#ffffff",
          fontSize: myEchartsFontSize(15),
          position: "bottom",
          // color: 'white',
          formatter: "{c} °C",
        },
        lineStyle: {
          width: myEchartsFontSize(1),
          color: "#ffffff",
        },
        areaStyle: {
          opacity: 1,
          color: "transparent",
        },
      },
    ],
  },
  shuikudata: null,
  zhamstatus: null,
  shuizhidata: null,
  chukulldata: null,
  gaojingdata: null,
  itemdata: null,
});
let a = null;
function getvideoplay() {
  getvideo({ id: "1" }).then((res) => {
    videoSrc.value = res.data.hdUrl;
    console.log(res.data.hdUrl);
  });
}
// getvideoplay();
const clickbuttonenter = (item, index) => {
  if (boolshow.value) {
    if (
      item.text != "巡检展示" &&
      item.text != "淹没模拟" &&
      item.text != "场景切换"
    ) {
      data.bottomdata.forEach((el, num) => {
        el.show = false;
        el.showlabel = false;
      });
      item.showlabel = true;
      item.show = true;
    }
  }
  if (boolshow2.value) {
    if (
      item.text != "巡检展示" &&
      item.text != "淹没模拟" &&
      item.text != "设备管理"
    ) {
      data.bottomdata.forEach((el, num) => {
        el.show = false;
        el.showlabel = false;
      });
      item.showlabel = true;
      item.show = true;
    }
  }
};
ue.interface.alldevicemethods = function () {
  data.bottomdata[1].selectlist.forEach((item, index) => {
    window.ue4("DevicesManage", {
      name: item.text,
      status: item.show == true ? 1 : 0,
    });
  });
};
const clickbuttonleave = (item, index) => {
  // item.showlabel = false;
};
const clickbutton = (item, index) => {
  if (a == index) {
    item.show = !item.show;
    item.showlabel = !item.showlabel;
  } else {
    a = index;
    // item.showlabel = !item.showlabel;
    data.bottomdata.forEach((el, num) => {
      el.show = false;
      el.showlabel = false;
    });
    item.show = true;
    item.showlabel = true;
  }

  if (item.text == "场景切换") {
    item.showlabel = item.show;
    if (item.show == true) {
      boolshow2.value = true;
    } else {
      boolshow2.value = false;
    }
  } else {
    boolshow2.value = false;
  }
  if (item.text == "巡检展示") {
    // window.ue4("DevicesManage", {
    //   text: item.text,
    // });
    if (item.show == true) {
      data.xunjianxianlu.forEach((item, index) => {
        item.show3 = false;
      });
      itemIsshow.value = true;
      viewportshow.value = true;
      xunjianshow.value = true;
      window.ue4("xjxl", {
        status: true,
      });
    } else {
      window.ue4("xjxl", {
        status: false,
      });
      xunjianshow.value = false;
    }
  } else {
    xunjianshow.value = false;
    window.ue4("xjxl", {
      status: false,
    });
  }
  if (item.text == "设备管理") {
    item.selectlist.forEach((item) => {
      item.show = true;
    });
    let ishow = item.selectlist.filter((t, n) => t.show == true);
    if (ishow.length == 0) {
      isshowbutton.value = false;
    } else {
      isshowbutton.value = true;
    }
    if (item.show == true) {
      boolshow.value = true;
      window.ue4("DevicesManage", {
        text: true,
      });
      window.ue4("DevicesManage", {
        name: "水雨情",
        status: 1,
      });
      window.ue4("DevicesManage", {
        name: "渗流计",
        status: 1,
      });
      window.ue4("DevicesManage", {
        name: "渗压计",
        status: 1,
      });
      window.ue4("DevicesManage", {
        name: "水位计",
        status: 1,
      });
      window.ue4("DevicesManage", {
        name: "摄像头",
        status: 1,
      });
      window.ue4("DevicesManage", {
        name: "位移设备",
        status: 1,
      });
    } else {
      boolshow.value = false;
      window.ue4("DevicesManage", {
        text: false,
      });
    }
  } else {
    boolshow.value = false;
    // 点击其他关闭所有设备
    window.ue4("closeAll", {
      status: false,
    });
    isshowbutton.value = false;
  }
  if (item.text == "淹没模拟") {
    // console.log("淹没模拟");
    window.ue4("yanmomn", {
      status: true,
    });
  }
};
watch(
  data.dataSource,
  (newVal, oldVal) => {
    init();
  },
  { deep: true }
);
data.shuikudata = computed(() => store.state.shuikudata);
data.zhamstatus = computed(() => store.state.zhamstatus);
data.shuizhidata = computed(() => store.state.shuizhidata);
data.chukulldata = computed(() => store.state.chukulldata);
data.gaojingdata = computed(() => store.state.gaojingtitle);

watch(
  () => data.gaojingdata,
  async (newval, old) => {
    const res = await getgaojinAll({ page: 1, size: 10 });
    page.value = 1;
    // console.log(JSON.parse(res.data.records[0].content));
    res.data.records.forEach((item, index) => {
      item.content = JSON.parse(item.content);
    });
    total.value = res.data.total;
    data.tableData = res.data.records;
    gaojingtitlered.value = data.gaojingdata.title;
    let item = data.tableData.find(
      (item, index) => item.title == gaojingtitlered.value
    );
    // console.log(data.tableData, item);
    if (data.gaojingdata.type == 4) {
      gaojinclick3.value = true;
      hongshuiyugaotext.value = data.gaojingdata.title;
      if (timeoutval2.value) {
        clearTimeout(timeoutval2.value);
        timeoutval2.value = setTimeout(() => {
          gaojingIsshow.value = false;
        }, 8000);
      } else {
        timeoutval2.value = setTimeout(() => {
          gaojingIsshow.value = false;
        }, 8000);
      }
      if (timeoutval3.value) {
        clearTimeout(timeoutval3.value);
        timeoutval3.value = setTimeout(() => {
          gaojingtitlered.value = "";
        }, 8000);
      } else {
        timeoutval3.value = setTimeout(() => {
          gaojingtitlered.value = "";
        }, 8000);
      }
    } else if (data.gaojingdata.type == 5 || data.gaojingdata.type == 6) {
      gaojinclick4.value = true;
      shuizhigaojingtext.value = data.gaojingdata.title;
      if (item != undefined) {
        shuizhigaojingtime.value = item.warnTime || item.content.tm;
      }

      if (timeoutval.value) {
        clearTimeout(timeoutval.value);
        timeoutval.value = setTimeout(() => {
          yibanbaojing.value = false;
        }, 8000);
      } else {
        timeoutval.value = setTimeout(() => {
          yibanbaojing.value = false;
        }, 8000);
      }
      if (timeoutval3.value) {
        clearTimeout(timeoutval3.value);
        timeoutval3.value = setTimeout(() => {
          gaojingtitlered.value = "";
        }, 8000);
      } else {
        timeoutval3.value = setTimeout(() => {
          gaojingtitlered.value = "";
        }, 8000);
      }
    }
    if (item != undefined) {
      // if (data.gaojingdata.type == 4) {
      //   gaojinclick3.value = true;
      //   hongshuiyugaotext.value = data.gaojingdata.title;
      // } else
      if (data.gaojingdata.type <= 3) {
        if (item.warnLevel == 1) {
          // console.log(111);
          yibanbaojing.value = true;
          if (timeoutval.value) {
            clearTimeout(timeoutval.value);
            timeoutval.value = setTimeout(() => {
              yibanbaojing.value = false;
              // gaojingtitlered.value = "";
            }, 8000);
          } else {
            timeoutval.value = setTimeout(() => {
              yibanbaojing.value = false;
            }, 8000);
          }
          if (timeoutval3.value) {
            clearTimeout(timeoutval3.value);
            timeoutval3.value = setTimeout(() => {
              gaojingtitlered.value = "";
            }, 8000);
          } else {
            timeoutval3.value = setTimeout(() => {
              gaojingtitlered.value = "";
            }, 8000);
          }
        } else {
          // console.log(2222);
          data.itemdata = item;
          gaojingIsshow.value = true;
          gaojinclick.value = true;
          if (timeoutval2.value) {
            clearTimeout(timeoutval2.value);
            timeoutval2.value = setTimeout(() => {
              gaojingIsshow.value = false;
            }, 8000);
          } else {
            timeoutval2.value = setTimeout(() => {
              gaojingIsshow.value = false;
            }, 8000);
          }
          if (timeoutval3.value) {
            clearTimeout(timeoutval3.value);
            timeoutval3.value = setTimeout(() => {
              gaojingtitlered.value = "";
            }, 8000);
          } else {
            timeoutval3.value = setTimeout(() => {
              gaojingtitlered.value = "";
            }, 8000);
          }
        }
      }
    }
    // if (data.chukulldata.data == null) {
    //   data.waterimgList[1].val = "0m³/s";
    // } else {
    //   data.waterimgList[1].val = data.chukulldata.data + "m³/s";
    // }
    // console.log(data.shuizhidata);
  },
  { deep: true }
);

watch(
  () => data.chukulldata,
  (newval, old) => {
    if (data.chukulldata.data == null) {
      data.waterimgList[1].val = "0m³/s";
    } else {
      data.waterimgList[1].val = data.chukulldata.data + "m³/s";
    }

    // console.log(data.shuizhidata);
  },
  { deep: true }
);

watch(
  () => data.shuizhidata,
  async (newval, old) => {
    // console.log(data.shuizhidata);
    if (data.shuizhidata.data.length != 0) {
      let item = data.shuizhidata.data.find((item) => item.itmNm == "PH");
      if (item) {
        data.waterquiltyList[2].val = parseFloat(item.val);
      }
      let item2 = data.shuizhidata.data.find((item) => item.itmNm == "电导率");
      if (item2) {
        data.waterquiltyList[3].val = parseFloat(item2.val);
      }
      let item3 = data.shuizhidata.data.find((item) => item.itmNm == "水温");
      if (item3) {
        data.waterquiltyList[0].val = parseFloat(item3.val);
        // console.log(parseFloat(item3.val));
      }
      let item4 = data.shuizhidata.data.find((item) => item.itmNm == "浊度");
      if (item4) {
        data.waterquiltyList[4].val = parseFloat(item4.val);
      }
      let item5 = data.shuizhidata.data.find((item) => item.itmNm == "溶解氧");
      if (item5) {
        data.waterquiltyList[1].val = parseFloat(item5.val);
      }
    }
  },
  { deep: true }
);
watch(
  () => data.shuikudata,
  async (newval, old) => {
    // getshuikudata();
    let res = await Getshuikudata({});
    allkr.value = parseFloat(res.data[0].totCap * 10000);
    if (data.shuikudata) {
      // if (data.shuikudata.data[0].ar) {
      //   data.waterimgList[1].val = data.shuikudata.data[0].ar + "㎡";
      // }
      data.waterimgList[0].val = data.shuikudata.data[0].w + "m³";
      data.waterimgList[2].val = data.shuikudata.data[0].rz + "m";
      shuiwei.value = parseFloat(data.shuikudata.data[0].rz);
      if (allkr.value) {
        // console.log(allkr.value);
        percentage.value = (
          (parseFloat(data.shuikudata.data[0].w) / allkr.value) *
          100
        ).toFixed(0);
      }
    }
  },
  { deep: true }
);
watch(
  () => data.zhamstatus,
  (newval, old) => {
    if (data.zhamstatus) {
      if (data.zhamstatus.data[0].gateList.length == 0) {
        status.value = "离线";
      } else {
        let isundefined = data.zhamstatus.data[0].gateList.find(
          (item) => parseFloat(item.gtophgt) > 0
        );
        if (isundefined == undefined) {
          status.value = "关";
        } else {
          status.value = "开";
        }
      }

      // if (data.zhamstatus.data[0].ar) {
      //   data.waterimgList[0].val = data.shuikudata.data[0].ar + "㎡";
      // }
      // data.waterimgList[1].val = data.shuikudata.data[0].w + "m³";
      // data.waterimgList[2].val = data.shuikudata.data[0].rz + "m";
    }
  },
  { deep: true }
);
const xiehongzha = () => {
  // toggle();
  //  if (rightVisible.value) {
  shuizhabutton.value = !shuizhabutton.value;
  // } else {
  // shuizhabutton.value = false;
  // }
};
const elclick = (el, num, item) => {
  if (item.text == "设备管理") {
    if (el.text != "泄洪闸") {
      el.show = !el.show;
    }
    let ishow = item.selectlist.filter((t, n) => t.show == true);
    if (ishow.length == 0) {
      isshowbutton.value = false;
    } else {
      isshowbutton.value = true;
    }
  } else {
    data.bottomdata[num].selectlist.forEach((item, index) => {
      item.show = false;
    });
    el.show = true;
  }
  if (item.text == "场景切换") {
    let obj = {
      text: el.text,
    };
    // console.log(obj);
    window.ue4("PawnSight", obj);
    // toggle();
  } else if (item.text == "设备管理") {
    // console.log(el.text);
    if (el.text == "泄洪闸") {
      el.show = true;
      setTimeout(() => {
        el.show = false;
      }, 200);
      toggle();
      if (rightVisible.value) {
        shuizhabutton.value = true;
      } else {
        shuizhabutton.value = false;
      }
    }
    if (el.show == true) {
      window.ue4("DevicesManage", {
        name: el.text,
        status: 1,
      });
    } else {
      window.ue4("DevicesManage", {
        name: el.text,
        status: 0,
      });
    }
  }
  if (el.text == "巡检2") {
    // console.log(0);
    // window.ue4("Wander", { WanderStart: 0 });
    xunjianshow.value = true;
  } else if (el.text == "巡检1") {
    // console.log(111);
    // window.ue4("Wander", { WanderStart: 1 });
    xunjianshow.value = true;
  } else if (el.text == "巡检3") {
    // console.log(111);
    // window.ue4("Wander", { WanderStart: 1 });
    xunjianshow.value = true;
  }
};
const wetherchange = (el, n) => {
  data.weatherdata.forEach((item, index) => {
    item.show = false;
  });
  el.show = true;
  let obj = {
    rain: el.text,
  };
  // console.log(obj);
  window.ue4("weather", obj);
};
const callBackFun = (e) => {
  // console.log("打印e", e)
  timeh.value = e;
  // console.log("回调执行")
};
const threeclick = (item, index) => {
  data.threelist.forEach((n) => {
    n.show = false;
  });
  item.show = true;
  // getbaoyudata();
};
const changeSliderue = (val) => {
  isabled2.value = true;
  setTimeout(() => {
    isabled2.value = false;
  }, 5000);
  window.ue4("FloodingSimulation", {
    WaterLevel: shuiwei.value,
  });
};
const changeSliderue2 = (item, index, val) => {
  // console.log(item.text, index, val);
  // isabled2.value = true;
  // setTimeout(() => {
  //   isabled2.value = false;
  // }, 5000);
  // if(index)
  item.disableshow = true;
  setTimeout(() => {
    item.disableshow = false;
  }, 5000);
  if (item.text == "闸1") {
    window.ue4("zham1", {
      status: val / 100,
    });
  } else if (item.text == "闸2") {
    window.ue4("zham2", {
      status: val / 100,
    });
  } else if (item.text == "闸3") {
    window.ue4("zham3", {
      status: val / 100,
    });
  }
};
function handlDelta(e) {
  return e + "%";
}
const exportToExcel = () => {
  const elTable = elTableyy.value;
  const wb = XLSX.utils.table_to_book(elTable.$el, {
    sheet: "Sheet JS",
    raw: true,
  });
  const wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      "告警数据.xlsx"
    );
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
};

const closegaojin = () => {
  gaojingIsshow2.value = false;
  gaojingIsshow.value = false;
};
const closegaojin2 = () => {
  gaojinclick.value = false;
};
const closegaojin3 = () => {
  gaojinclick3.value = false;
};
const closegaojin4 = () => {
  gaojinclick4.value = false;
};
ue.interface.Isshowgaojin = function (val) {
  console.log(val);
  waterheight.value = val;
  (watertime.value =
    moment().format("YYYY-MM-DD") + " " + moment().format("hh:mm:ss")),
    (gaojingIsshow2.value = true);
  gaojingIsshow.value = true;
  setTimeout(() => {
    gaojingIsshow.value = false;
  }, 8000);
  // data.code = val;
  // getshenliuji();
};

const handleRowClick = (row, column, event) => {
  console.log("行数据:", row);
  // warnTimeStr.value = row.warnTime;
  // warnContent1.value = row;
  data.itemdata = row;
  gaojinclick.value = true;
  // console.log("点击列:", column);
  // console.log("事件:", event);
  // 在这里处理点击行的事件
};
const shujumoni = () => {
  data.bottomdata[3].show = true;
  gaojinclick3.value = false;
};
const tableRowClassName = ({ row, rowIndex }) => {
  if (row.title == gaojingtitlered.value) {
    return "success";
  }
};
const buttonll = (val) => {
  buttonl.value = !buttonl.value;
  console.log(val);
  // 是否展示绿地，true为展示 false为隐藏
  window.ue4("ishowld", {
    Isshow: val,
  });
};
const mouseleaveevent = (item) => {
  // if (item.text != "设备管理") {
  item.showlabel = false;
  // }
};
const listItemClicked = (index) => {
  shuizhabutton.value = false;
  if (index == 2) {
    levelwatershow.value = true;
  }
};
const mouseleavell = (index) => {
  if (index == 2) {
    levelwatershow.value = false;
  }
};
const itemshow = (item, index) => {
  // data.xunjianxianlu.forEach((i, j) => {
  //   i.show = false;
  //   i.show2 = false;
  // });
  // item.show = true;

  if (item == "大坝巡检") {
    itemIsshow.value = !itemIsshow.value;
    if (!itemIsshow.value) {
      // console.log(1111);

      window.ue4("xunjian1", {
        status: true,
      });
    } else {
      window.ue4("xunjian1", {
        status: false,
      });
      itemIsshow2.value = true;
    }

    // window.ue4("xunjian2", {
    //   status: false,
    // });
    // window.ue4("xunjian3", {
    //   status: false,
    // });
  } else if (item == "泄洪闸巡检") {
    // window.ue4("xunjian1", {
    //   status: false,
    // });
    // window.ue4("xunjian2", {
    //   status: true,
    // });
    // window.ue4("xunjian3", {
    //   status: false,
    // });
  } else if (item == "下游泄洪道巡检") {
    // window.ue4("xunjian1", {
    //   status: false,
    // });
    // window.ue4("xunjian2", {
    //   status: false,
    // });
    // window.ue4("xunjian3", {
    //   status: true,
    // });
  }
  // item.show3 = false;
};
const closexunjian = () => {
  xunjianshow.value = false;
  window.ue4("xunjian1", {
    status: false,
  });
  // window.ue4("xunjian2", {
  //   status: false,
  // });
  // window.ue4("xunjian3", {
  //   status: false,
  // });
  data.bottomdata[2].show = false;
};
const itemshow2 = () => {
  // item.show2 = !item.show2;
  itemIsshow2.value = !itemIsshow2.value;
  if (!itemIsshow2.value) {
    window.ue4("xunjianis", {
      status: false,
    });
  } else {
    window.ue4("xunjianis", {
      status: true,
    });
  }
};
const itemshow3 = (item, index) => {
  data.xunjianxianlu.forEach((i, j) => {
    i.show3 = false;
  });
  item.show3 = true;
  if (item.text == "大坝巡检") {
    if (item.show3) {
      window.ue4("luxian2", {
        status: true,
      });
      // window.ue4("luxian3", {
      //   status: false,
      // });
      // window.ue4("luxian4", {
      //   status: false,
      // });
    }
  } else if (item.text == "泄洪闸巡检") {
    if (item.show3) {
      // window.ue4("luxian2", {
      //   status: false,
      // });
      window.ue4("luxian3", {
        status: true,
      });
      // window.ue4("luxian4", {
      //   status: false,
      // });
    }
  } else if (item.text == "下游泄洪道巡检") {
    if (item.show3) {
      // window.ue4("luxian2", {
      //   status: false,
      // });
      // window.ue4("luxian3", {
      //   status: false,
      // });
      window.ue4("luxian4", {
        status: true,
      });
    }
  }
};
const openvideo = () => {
  videoRef.value.open();
};

const viewport = (val) => {
  viewportshow.value = !viewportshow.value;
  window.ue4("zhushijiao", {
    status: val,
  });
};

const dingweidanger = (obj) => {
  data.bottomdata.forEach((item, index) => {
    item.show = false;
    item.showlabel = false;
    if (item.selectlist && item.selectlist.length != 0) {
      item.selectlist.forEach((el, num) => {
        el.show = false;
      });
    }
  });
  xunjianshow.value = false;
  boolshow.value = false;
  boolshow2.value = false;
  // console.log(obj);
  gaojinclick.value = false;
  window.ue4("closeAll", {
    status: false,
  });
  window.ue4("xjxl", {
    status: false,
  });
  window.ue4("DevicesManage", {
    text: false,
  });
  window.ue4("yanmomn", {
    status: false,
  });
  window.ue4("xunjian1", {
    status: false,
  });
  window.ue4("xunjian1", {
    status: false,
  });
  window.ue4("luxian2", {
    status: false,
  });
  window.ue4("luxian3", {
    status: false,
  });
  window.ue4("luxian4", {
    status: false,
  });
  // data.bottomdata.forEach((item,index)=>{

  // })

  window.ue4("DeviceWarning", {
    lgtd: obj.lgtd,
    lttd: obj.lttd,
  });
};
</script>

<style lang="scss" scoped>
// .home {
//   position: absolute;
//   top: 0px;
//   left: 0px;
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   z-index: 1;
//   pointer-events: auto;

.redload {
  z-index: 9;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: url("@/assets/image/hongbian.png") no-repeat;
  background-size: cover;
  pointer-events: none;

  animation: bilibili 8s infinite ease-in-out forwards;
}

@keyframes bilibili {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.gaojin {
  width: 372px;
  height: 240px;
  padding-left: 22px;
  box-sizing: border-box;
  position: absolute;
  top: calc(50% - 120px);
  left: calc(50% - 186px);
  background: url("@/assets/image/gaojinback.png") 0px no-repeat;
  background-size: cover;
  z-index: 1000;

  .titlegaojing {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;

    margin-top: 2px;
    letter-spacing: 1px;
    // line-height: 25px;
    // text-align: left;
    // font-style: normal;
    // text-transform: none;
  }
  .gaojingclose {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 6px;
    top: 4px;
    // border: 1px solid gold;
    cursor: pointer;
  }
  .gaojingxq {
    margin-top: 24px;

    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
  }
  .gaojingtime {
    margin-top: 10px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
  }
  .gaojingdingwei {
    width: 50px;
    height: 24px;
    background: #b90000;
    border-radius: 2px 2px 2px 2px;

    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: center;

    margin-top: 20px;
    cursor: pointer;
  }
  .shujumoni {
    display: inline-block;
    width: 85px;
    height: 24px;
    background: #b90000;
    border-radius: 2px 2px 2px 2px;

    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: center;

    margin-left: 30px;
    cursor: pointer;
  }
  .closeshuju {
    display: inline-block;
    width: 85px;
    height: 24px;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #b90000;

    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    // font-style: normal;
    // text-transform: none;
  }
  .gaojingroupimg {
    position: absolute;
    right: 30px;
    bottom: 42px;
    height: 95px;
    width: 90px;
    // border: 1px solid gold;
    .gaojintop {
      position: absolute;
      top: 10px;
      left: 24px;
      width: 39px;
      height: 39px;
      z-index: 2;
    }
    .gaojinbottom {
      width: 150px;
      height: 140px;
      position: absolute;
      bottom: -35px;
      left: -30px;
      // z-index: 2;
    }
    .bigcircle {
      position: absolute;
      width: 90px;
      height: 95px;
      top: 0px;
      left: 0px;
      animation: fadeOut 5s infinite ease-in-out; /* 动画名称，持续时间，缓动函数，填充模式 */
    }
    .middlecircle {
      position: absolute;
      width: 57px;
      height: 74px;
      bottom: 20px;
      left: 15px;
      animation: fadeOut 5s infinite ease-in-out;
    }
    .smallcircle {
      position: absolute;
      width: 35px;
      height: 46px;
      top: 22px;
      left: 26px;
      animation: fadeOut 5s infinite ease-in-out;
    }

    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
}
.shuiweichanges {
  position: absolute;
  top: 109px;
  right: 449px;
  width: 247px;
  height: 141px;
  background: rgba(101, 37, 37, 0.9);
  padding: 0px 17px;
  box-sizing: border-box;
  .shuiweichangetitle {
    color: #ffffff;
    font-size: 16px;
    margin-top: 13px;
  }
  .waterlevel {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 40px;
    color: #ff9000;
    // line-height: 60px;
    margin-top: 20px;
  }
}
.zdsz {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 67px;
  left: 422px;
  z-index: 4;
  cursor: pointer;
}
.left {
  width: 500px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url("@/assets/image/leftback.png") 0px 0px no-repeat;
  background-size: cover;
  transition: all 1s linear;
  z-index: 2;
  .leftbox {
    width: 100%;
    position: absolute;
    top: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .lefttop {
      position: relative;
      width: 400px;
      height: 300px;
      .flex {
        display: flex;
        justify-content: center;
        gap: 54px;
        margin-top: 55px;
        .flexitem {
          display: flex;
          flex-direction: column;
          align-items: center;
          .fleximg {
            width: 64px;
            height: 59px;
          }
          .flextext {
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 25px;
            letter-spacing: 1px;
            //   text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .flexval {
            font-family: "HuXiaoBo-NanShen";
            font-weight: normal;
            font-size: 18px;
            color: #ffffff;
            line-height: 32px;
            letter-spacing: 1px;
            //   text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      .flex2 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 65px;
        margin-top: 20px;
        .flexel-progress {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          .fleximgsz {
            width: 64.11px;
            height: 52.24px;
          }
          .fleximgsz2 {
            width: 64.11px;
            height: 52.24px;
          }
          .bottomtext {
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 25px;
            //   letter-spacing: 100px;
            //   text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .bottomtext2 {
            margin-top: 16px;
          }
        }
      }
    }
    .leftcenter {
      position: relative;
      width: 400px;
      height: 350px;
      .centerflex {
        //   border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 10px;
        margin-top: 45px;
        .centerflexitemn {
          position: relative;
          width: 193.05px;
          height: 83.21px;
          // text-align: right;
          // .flexitemimg {
          //   width: 193.05px;
          //   height: 83.21px;
          //   position: absolute;
          //   left: 0px;
          //   top: 0px;
          //   z-index: 0;
          // }
          .centerflextext {
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            //   line-height: 25px;
            //   letter-spacing: 1px;
            //   text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 22px;
            margin-left: 116px;
            //   border: 1px solid red;
            white-space: nowrap;
          }
          .centerflexval {
            font-family: "HuXiaoBo-NanShen";
            font-weight: 400;
            font-size: 18px;
            color: #5adae9;
            //   line-height: 25px;
            letter-spacing: 1px;
            //   text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 10px;
            margin-left: 108px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            .redimg {
              width: 27px;
              height: 27px;
            }
          }
          .redclass {
            color: #ff1313;
          }
        }
        .back1 {
          background: url("@/assets/image/wd.png") 0px 0px no-repeat;
          background-size: cover;
        }
        .back2 {
          background: url("@/assets/image/rjy.png") 0px 0px no-repeat;
          background-size: cover;
        }
        .back3 {
          background: url("@/assets/image/ph.png") 0px 0px no-repeat;
          background-size: cover;
        }
        .back4 {
          background: url("@/assets/image/ddl.png") 0px 0px no-repeat;
          background-size: cover;
        }
        .back5 {
          background: url("@/assets/image/zd.png") 0px 0px no-repeat;
          background-size: cover;
        }
      }
    }
    .leftbottom {
      position: relative;
      width: 400px;
      height: 300px;
      // border: 1px solid red;
      .yibanbaojing {
        width: 526px;
        height: 403px;
        position: absolute;
        top: -48px;
        left: 50%;
        // border: 1px solid red;
        transform: translateX(-50%);
        background: url("@/assets/image/yibanbaojing.png") no-repeat;
        background-size: cover;
        pointer-events: none;
        animation: bilibili 8s infinite ease-in-out forwards;
        // animation-duration: 8s;
      }
      .table {
        margin-top: 44px;
        // border: 1px solid red;
        .el-table {
          // border: 1px solid red;
          height: 220px;
          overflow-y: auto;
        }
      }
      .loadimg {
        width: 18px;
        height: 18px;
        position: absolute;
        top: 55px;
        right: 30px;
        z-index: 4;
        cursor: pointer;
      }
    }
    .titlediv {
      width: 100%;
      height: 34px;
      position: absolute;
      top: 0px;
      left: 0px;
      background: url("@/assets/image/smalltitle.png") 0px 0px no-repeat;
      background-size: cover;
      .titletext {
        color: #ffffff;
        font-family: "HuXiaoBo-NanShen";
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 28px;
        letter-spacing: 1px;
        font-style: normal;
        text-transform: none;
        margin-left: 16px;
      }
    }
  }
}
.rightbutton {
  //   width: 100px;
  //   height: 100px;
  //   border: 1px solid red;
  position: absolute;
  top: 134px;
  left: 518px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  .rightitem {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 14px;
    .imgtt {
      width: 60px;
      height: 60px;
      cursor: pointer;
    }
    .elslider {
      position: absolute;
      left: 60px;
      top: 38%;
      transform: translateY(-50%);
      // height: 100px;
    }
    .el-slider.is-vertical {
      height: 83% !important;
    }
    .el-slider {
      --el-slider-runway-bg-color: rgba(255, 144, 0, 0.6) !important;
    }
  }
}
.right {
  width: 500px;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url("@/assets/image/rightback.png") 0px 0px no-repeat;
  background-size: cover;
  transition: all 1s linear;
  z-index: 2;
  .rightbox {
    width: 100%;
    position: absolute;
    top: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .righttop {
      position: relative;
      width: 400px;
      height: 300px;
      .timetrack {
        position: relative;
        width: 100%;
        // border: 1px solid red;
        margin-top: 40px;
      }
      .righttopflex2 {
        position: absolute;
        top: 95px;
        width: 100%;
        height: 200px;
      }
      .righttopflex {
        position: absolute;
        top: 95px;
        display: flex;
        justify-content: space-between;
        gap: 16px 35px;
        flex-wrap: wrap;
        .flexitemd {
          position: relative;
          width: 63.07px;
          height: 90px;
          cursor: pointer;
          // border: 1px solid red;
          //  perspective: 100px; /* 设置透视距离 */
          .topimg {
            width: 33px;
            height: 24px;
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
            animation: box3 5s linear infinite;
            z-index: 1;
          }
          .topimg:first-child {
            width: 30px;
            height: 30px;
          }
          .img1 {
            width: 63px;
            height: 34px;
            position: absolute;
            top: 22px;
            left: 50%;
            transform: translateX(-50%);
          }
          .img2 {
            position: absolute;
            top: 29px;
            left: 50%;
            transform: translateX(-50%);
          }
          .img3 {
            position: absolute;
            top: 35px;
            left: 50%;
            transform: translateX(-50%);
            animation: box3 1s linear infinite;
          }
          .img4 {
            position: absolute;
            top: 35px;
            left: 50%;
            transform: translateX(-50%);
          }
          .img5 {
            position: absolute;
            top: 33px;
            left: 50%;
            transform: translateX(-50%);
            transform-origin: center;
            // animation: box1 1s linear infinite;
          }
          .wethertext {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);

            font-family: "Source Han Sans CN";
            // font-weight: 600;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 1px;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
    .rightcenter {
      position: relative;
      width: 400px;
      height: 380px;
    }
    .switch {
      position: absolute;
      right: 61px;
      top: 5px;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 1;
      .switchtext {
        font-family: "Source Han Sans CN";
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 1px;
        font-style: normal;
        text-transform: none;
      }
    }
    .blocktimer {
      position: absolute;
      top: 42px;
      left: 0px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0px;
      z-index: 2;
      color: #ffffff;
      .timerthreeitem {
        width: 71px;
        height: 26px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 12px;
        color: #ffffff;
        line-height: 26px;
        letter-spacing: 1px;
        text-align: center;
        background: #414647;
        border: 1px solid #ffffff;
        border-radius: 2px;
        cursor: pointer;
      }
      .activetimeritem {
        background: #217291;
      }
    }
    .jzwhf {
      width: 400px;
      height: 380px;
    }
    .rightbottom {
      position: relative;
      width: 400px;
      height: 270px;
      .videoplay {
        width: 400px;
        height: 225px;
        position: absolute;
        top: 39px;
        left: 0px;
        .fullscreen {
          position: absolute;
          width: 15px;
          height: 15px;
          right: 15px;
          bottom: 8px;
          cursor: pointer;
        }
      }
    }
    .titlediv {
      width: 100%;
      height: 34px;
      position: absolute;
      top: 0px;
      left: 0px;
      background: url("@/assets/image/smalltitle.png") 0px 0px no-repeat;
      background-size: cover;
      .titletext {
        color: #ffffff;
        font-family: "HuXiaoBo-NanShen";
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 28px;
        font-style: normal;
        text-transform: none;
        margin-left: 16px;
      }
    }
  }

  .titlediv {
    width: 100%;
    height: 34px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url("@/assets/image/smalltitle.png") 0px 0px no-repeat;
    background-size: cover;
    .titletext {
      color: #ffffff;
      font-family: "HuXiaoBo-NanShen";
      font-weight: normal;
      font-size: 16px;
      color: #ffffff;
      line-height: 28px;
      font-style: normal;
      text-transform: none;
      margin-left: 16px;
    }
  }
}
.xunjianxianlu {
  width: 252px;
  height: 183px;
  position: absolute;
  top: 238px;
  right: 500px;
  background: url("@/assets/image/xunjianxianlu.png") no-repeat;
  background-size: cover;
  padding: 0px 13px;
  box-sizing: border-box;
  z-index: 1000;
  .xunjianxianluclose {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 15px;
    height: 15px;
    // border: 1px solid red;
    cursor: pointer;
  }
  .titlexunjian {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    // line-height: 25px;
    margin-left: 4px;
  }
  // .flexxunjian2{
  //   display: flex;
  //   align-items: center;
  //   height: 90px;
  //   font-size: 14px;
  //   color: #ffffff;
  // }
  .flexxunjian {
    display: flex;
    align-items: center;
    height: 90px;
    font-size: 14px;
    color: #ffffff;
    border: 1px solid #46a5d9;
    // border-bottom: 0px;
    .flexleft {
      flex: 2.01;
      height: 90px;
    }
    .flexright {
      flex: 1;
      height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      // align-items: center;
      // justify-content: center;
      // gap: 5px;
      // border-bottom: 1px solid #46a5d9;
      .flexright2 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        .viewimg {
          width: 22px;
          height: 22px;
        }
      }
    }
    .flex1 {
      flex: 2;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #46a5d9;
      border-bottom: 0px;
    }
    .flex2 {
      flex: 1;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #46a5d9;
      // border-bottom: 0px;
      border-left: 0px;
      border-top: 0px;
      &:last-child {
        border-bottom: 0px;
        height: 29px;
      }
      .flex1span {
        display: inline-block;
        border-bottom: 1px solid #ffffff;
        line-height: 18px;
      }
      .flex1span2 {
        color: #4dc0ff;
        border-bottom: 1px solid #4dc0ff;
      }
    }
    // &:last-child {
    //   border: 1px solid #46a5d9;
    // }
    // .flex3 {
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    //   gap: 10px;
    // }
    .xunjianclose {
      width: 22px;
      height: 22px;
    }
  }
  .flexxunjian2 {
    margin-top: 23px;
    background: #003960;

    display: flex;
    align-items: center;
    height: 30px;
    font-size: 14px;
    color: #ffffff;

    .flex1 {
      flex: 2;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #46a5d9;
      border-bottom: 0px;
      .flex1span {
        // display: inline-block;
        // border-bottom: 1px solid #ffffff;
        // line-height: 18px;
      }
      .flex1span2 {
        // color: #4dc0ff;
        // border-bottom: 1px solid #4dc0ff;
      }
    }
    .flex2 {
      flex: 1;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #46a5d9;
      border-bottom: 0px;
      border-left: 0px;
    }
  }
}
.bottom {
  width: 100%;
  height: 120px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: url("@/assets/image/bottomback.png") 0px 0px no-repeat;
  background-size: cover;
  z-index: 1;
  .buttonl {
    width: 34px;
    height: 14px;
    position: absolute;
    top: 30px;
    left: 70%;
    pointer-events: all;
    z-index: 999;
    cursor: pointer;
  }
  .bottomback {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 960.58px;
    height: 88px;
    background: url("@/assets/image/z25.png") 0px 0px no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    gap: 24px;
    .buttoncss {
      position: relative;
      width: 146.25px;
      height: 28.58px;
      // border: 1px solid red;
      margin-top: 16px;
      text-align: center;
      line-height: 28.58px;

      font-family: "Source Han Sans CN";
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      // line-height: 25px;
      letter-spacing: 1px;
      // text-align: left;
      font-style: normal;
      text-transform: none;
      background: url("@/assets/image/button.png") 0px 0px no-repeat;
      background-size: cover;
      cursor: pointer;

      .buttonbuttonlist {
        width: 104px;
        // height: auto;
        position: absolute;
        top: -50%;
        left: 50%;
        transform: translate(-50%, -100%);
        // color: #000000;
        display: flex;
        flex-direction: column;
        gap: 1px;
        // border: 1px solid red;
        .elitem {
          width: 100%;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background: url("@/assets/image/jx28.png") 0px no-repeat;
          background-size: cover;
        }
        .activeelitem {
          background: url("@/assets/image/jx29.png") 0px no-repeat;
          background-size: cover;
        }
      }
    }
    .activebutton {
      background: url("@/assets/image/activebutton.png") 0px 0px no-repeat;
      background-size: cover;
    }
    .houtaibutton {
      width: 18.46px;
      height: 18.42px;
      position: absolute;
      top: 44px;
      left: 471px;
    }
    .houtaixzbutton {
      width: 18.46px;
      height: 18.42px;
      position: absolute;
      top: 68px;
      left: 463px;
    }
    .bottomecharts {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      bottom: 97px;
      left: 50%;
      width: 737px;
      height: 67px;
      transform: translate(-50%, 0);
      background: rgba(33, 87, 109, 0.47);
      border-radius: 9px 9px 9px 9px;
      // background: #21576d;
      // border-radius: 9px 9px 9px 9px;
      // opacity: 0.47;
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      // justify-content: center;
      text-align: center;
      .shuiweitext {
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        margin-top: 5px;
        margin-right: 10px;
      }
      .self_slider {
        // height: 120px;
        width: 88%;
        margin-top: 30px;
        margin-left: 14px;
        // border: 1px solid #4dc0ff;
      }
    }
  }
}
// }
@keyframes box1 {
  0% {
    transform: translateX(-50%) rotateY(0deg); /* 动画开始时，盒子完全不透明 */
  }
  100% {
    transform: translateX(-50%) rotateY(360deg); /* 动画结束时，盒子透明度为0.3 */
  }
}
@keyframes box3 {
  0% {
    transform: translate(0% 0px); /* 动画开始时，盒子完全不透明 */
  }
  50% {
    transform: translate(-50%, -8px); /* 动画结束时，盒子透明度为0.3 */
  }
  100% {
    transform: translate(-50%, 0px); /* 动画结束时，盒子透明度为0.3 */
  }
}
::v-deep {
  .elslider .el-slider__bar {
    background: transparent !important;
  }
  .elslider .el-slider__button {
    background-color: #ffffff !important;
    border: 0px !important;
    width: 8px !important;
    height: 8px !important;
  }
  .el-input .el-input__icon {
    display: none;
  }
  .datepicker {
    width: 30%;
    height: 20px;
  }
  .el-pager li {
    width: 100% !important;
    background: transparent !important;
  }
  .el-pagination .btn-prev {
    background: transparent !important;
    color: #ffffff;
    font-size: 18px;
  }
  .el-pagination > .is-last {
    background: transparent !important;
    color: #ffffff !important;
    font-size: 18px;
  }
  .el-pager li.is-active {
    color: green !important;
  }
  .el-pagination button.is-disabled,
  .el-pagination button:disabled {
    background: transparent !important;
    color: #ffffff;
  }
  .el-pager li .el-pagination > .is-last {
    background: transparent !important;
  }
  .el-pager li {
    color: #ffffff !important;
  }
  .el-pager {
    width: 100% !important;
  }
  // .picker-popper {
  // background: #000000 !important;
  // margin-left: -55px;
  // }
  .datepicker .el-input__inner {
    color: #ffffff;
    font-size: 12px;
  }
  .datepicker .el-input__wrapper {
    border-radius: 10px;
  }
  .custom-progress .el-progress-circle__track {
    stroke: #0076c9; /* 设置进度条的背景颜色 */
  }
  .el-progress {
    width: 70px;
    height: 70px;
  }
  .custom-progress .el-progress-circle {
    width: 70px !important;
    height: 70px !important;
  }
  .el-progress__text {
    color: #ffffff !important;
    font-size: 16px !important;
    font-family: "HuXiaoBo-NanShen";
  }
  //   .table {
  //     background: transparent !important;
  //   }
  .el-table td,
  .el-table th,
  .el-table tr {
    background: transparent !important;
    // border: none;
    color: #ffffff;
  }
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    // border-bottom: 1px solid #00a8df !important;
    // border-right: 1px solid #00a8df !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    height: 35px !important;
  }
  .el-table td.el-table__cell:last-child {
    border-right: 0px !important;
  }
  .el-table th.el-table__cell.is-leaf:last-child {
    border-right: 0px !important;
  }
  .el-table td.el-table__cell:first-child {
    border-right: 0px !important;
  }
  .el-table th.el-table__cell.is-leaf:first-child {
    border-right: 0px !important;
  }
  .el-table__inner-wrapper:before {
    height: 0px;
  }
  .el-table__header-wrapper {
    background: #21576d !important;
    height: 35px !important;
    // border-radius: 4px 4px 0px 0px;
  }
  .el-table tr:nth-child(2n) {
    // border-bottom: 1px solid #00a8df !important;
    background: rgba(33, 87, 109, 0.49) !important;
    // opacity: 0.49 !important;
  }

  .el-table .success {
    background-color: #ff0000 !important;
  }

  .cell {
    padding: 0px !important;
  }
  .el-switch__core .el-switch__action {
    background-color: #2d7a99;
  }

  .self_slider .el-slider__marks-text {
    // margin-left: -20px;
    color: #ffffff;
    transform: translateY(-35px);
    &:nth-child(5n + 1) {
      margin-left: -10px;
    }
  }
  .self_slider .el-slider__marks-text span {
    display: inline-block;
    height: 15px !important;
    // transform-origin: center;
    overflow: hidden;
    transform: translate(-5px, 3px) rotate(0deg);
    color: #4dc0ff;
  }
  // .el-slider__runway {
  //   height: 30px;
  // }
  .self_slider .el-slider__runway .el-slider__bar {
    // height: 30px;
    width: 17px;
    // background: #46a5d9;
    background: #ffffff;
    border-radius: 4px;
    // border: 1px solid #4dc0ff;
  }
  // .el-slider__runway .el-slider__button-wrapper {
  //   top: -2px;
  // }
  .self_slider .el-slider__stop {
    display: none;
  }
  .self_slider .el-slider__button {
    // display: none;
    visibility: hidden;
  }
  .self_slider .el-slider__marks {
    width: 17px !important;
  }
  .self_slider {
    // --el-slider-height: none;
    --el-slider-border-radius: 4px 4px 4px 4px;
  }
  // .self_slider.el-slider__runway {
  //   background: transparent !important;
  //   border: 1px solid #4dc0ff !important;
  // }

  .videoplay .video-js .vjs-fullscreen-control {
    visibility: hidden !important ;
  }
}
</style>